/* ==========================================================================
   SIGN IN — the threshold between tkati.com and the private TKATI system.
   AUTH PHASE Ω, 1 October 2026 (docs/auth/: the map, the four prototypes,
   and why "Architectural Mono" won).

   TWO WORLDS.
     LEFT, TKATI   the real monogram, traced, oversized and cropped by the
                   split; one sentence; the way home. Brand, not marketing.
     RIGHT, ACCESS the form on the canvas with no card around it: the fields,
                   the one button and the spacing carry it.
   The split is a tonal step and a hairline that fades at both ends, never a
   rule from top to bottom. Colour only for a state. No glow, glass, grid,
   texture or motion while the page sits; the mark never moves.

   THE ONE TKATI CUT. The mark's diagonals are 45°, and one 45° cut at the
   top right of the button is the only place the page uses it (§027, §253).

   IT IS LOADED AFTER app.css AND OVERRIDES IT ON PURPOSE. app.css is the
   field app's stylesheet: it still carries an old split for #signin at
   (1,0,0) in a media query, a padded card for .auth-card and a teal 56px
   style for every <button>. Every property those set is reset below at the
   same or higher specificity.

   THE MARKUP IS A CONTRACT. Every id, class and attribute page-field.mjs
   reads or toggles is where it was and means what it meant; this file
   changes how they look and nothing about what they do.
   ========================================================================== */

body:has(#signin),
body:has(#setup){
  --au-brand:#040404;                     /* the TKATI side: a step deeper */
  --au-bg:#0B0B0C;                        /* the access side */
  --au-field:#111214;                     /* a field at rest */
  --au-field-hi:#16171A;                  /* a field in focus */
  /* A field's edge at rest is 3.2:1 on its fill (WCAG 1.4.11): the edge is
     what says "type here", so it is held to the non-text minimum. */
  --au-line:rgba(255,255,255,.36);
  --au-line-hi:rgba(255,255,255,.5);      /* on hover */
  --au-split:rgba(255,255,255,.12);       /* the hairline between the halves */
  --au-hair-1:var(--hair-1);
  --au-hair-2:var(--hair-2);
  --au-hair-3:var(--hair-3);
  --au-hair-4:var(--hair-4);
  --au-l1:var(--surface-1);
  --au-text-hi:var(--text-hi);            /* 20:1 */
  --au-text:#EFEFEF;                      /* 17:1 on --au-bg */
  --au-text-2:var(--text-2);              /* 12:1, labels */
  --au-muted:var(--muted);                /* 7.9:1, support copy */
  --au-muted-2:var(--muted-2);            /* 5.9:1, the floor for words a person reads */
  --au-body:var(--body);
  --au-head:var(--display);
  --au-mono:var(--mono);
  --au-h:52px;                            /* control height (§063) */
  --au-r:8px;                             /* control radius (§064) */
  --au-cut:12px;                          /* the one 45° cut */
  --au-fast:.12s;
  --au-ease:cubic-bezier(.22,1,.36,1);    /* no overshoot */
}

/* ═══ THE FRAME ════════════════════════════════════════════════════════════
   The whole viewport. app.css pads <body> and caps #app at 34rem for the
   work screens; both are lifted while the sign-in is showing, and #app is a
   column so a boot error is a bar above the composition. */
body:has(#signin:not([hidden])){ background:var(--au-bg); padding:0; }
body:has(#signin:not([hidden])) #app{
  max-width:none; margin:0;
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
}

#signin{
  flex:1 0 auto;
  display:grid;
  grid-template-columns:minmax(0,58fr) minmax(440px,42fr);
  grid-template-rows:minmax(0,1fr);
  grid-template-areas:'world access';
  justify-items:stretch; align-items:stretch; align-content:stretch;
  gap:0; padding:0; min-height:0;
  color:var(--au-text);
}

/* ═══ LEFT: TKATI ══════════════════════════════════════════════════════════ */
.auth-world{
  grid-area:world;
  position:relative; overflow:hidden; isolation:isolate;
  min-height:100%;
  background:var(--au-brand);
}
/* The lockup, linking home (§107–108): the monogram as a faded plate and the
   drawn wordmark painted over real text, as tkati.com's top bar draws it. */
#signin .auth-brand{
  position:absolute; z-index:3;
  top:max(26px, env(safe-area-inset-top)); left:clamp(24px,3.4vw,56px);
  display:flex; align-items:center; gap:10px;
  min-height:32px; padding:2px 4px; margin:-2px -4px;
  border-radius:6px; text-decoration:none; color:var(--au-text-hi);
}
#signin .auth-brand:focus-visible{ outline:2px solid var(--au-text-hi); outline-offset:3px; }
.auth-logo{
  width:30px; height:auto;
  filter:brightness(0) invert(1); opacity:.42;      /* the white plate, never the purple */
}
.auth-word{
  display:block; width:96px; height:16px;
  background:url("/assets/wordmark.png") left center/contain no-repeat;
  text-indent:-9999px; overflow:hidden; white-space:nowrap;
  opacity:.92;
}

/* THE MARK AS MATERIAL. Oversized and cropped by the split, so it reads as
   architecture rather than a picture placed on the page; the K's lower
   diagonal meets the split at about the height of the form (§024–026, §254).
   A whisper of fill and a hairline edge, nothing that glows. */
.auth-mark{
  position:absolute; z-index:0; pointer-events:none;
  width:118%; height:auto; right:-36%; bottom:-14%;
}
.auth-mark__fill{ fill:rgba(255,255,255,.022); }
.auth-mark__line{ fill:none; stroke:rgba(255,255,255,.12); stroke-width:1.2; vector-effect:non-scaling-stroke; stroke-linejoin:round; }

.auth-statement{
  position:absolute; z-index:2;
  left:clamp(24px,3.4vw,56px); right:clamp(24px,4vw,72px);
  bottom:clamp(72px,11vh,112px);
}
.auth-statement__h{
  margin:0; max-width:11ch;
  font:650 clamp(40px,4.4vw,72px)/1.02 var(--au-head); letter-spacing:-.025em;
  color:var(--au-text);
}
.auth-statement__sub{
  margin:18px 0 0; max-width:40ch;
  font:400 clamp(15px,1.1vw,17px)/1.55 var(--au-body);
  color:var(--au-muted);
}
#signin .auth-back{
  position:absolute; z-index:3;
  left:clamp(24px,3.4vw,56px); bottom:max(26px, env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; gap:6px; min-height:28px;
  color:var(--au-muted-2); text-decoration:none;
  font:500 13px/1 var(--au-body); border-radius:4px;
  transition:color var(--au-fast) var(--au-ease);
}
#signin .auth-back:hover{ color:var(--au-text); }
#signin .auth-back:focus-visible{ outline:2px solid var(--au-text-hi); outline-offset:3px; }

/* ═══ RIGHT: ACCESS ════════════════════════════════════════════════════════ */
.auth-access{
  grid-area:access;
  position:relative;
  display:grid; place-items:center;
  /* The optical centre: the group sits a little above the middle (§014). */
  padding:72px clamp(28px,4vw,72px) max(9vh, 48px);
  background:var(--au-bg);
}
/* THE SPLIT: a tonal step and a hairline that fades at both ends (§028). */
.auth-access::before{
  content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px;
  background:linear-gradient(180deg,transparent,var(--au-split) 30%,var(--au-split) 70%,transparent);
}
/* No card (§242, §418): app.css's padded, bordered .auth-card is undone. */
#signin .auth-card{
  grid-area:auto;                         /* app.css names an area this grid does not have */
  width:100%; max-width:420px;
  margin:0; padding:0;
  background:none; border:0; border-radius:0; box-shadow:none;
}

#signin .auth-head{ display:block; margin:0 0 30px; }
.signin-title{
  margin:0;
  font:650 40px/1.05 var(--au-head); letter-spacing:-.022em;
  color:var(--au-text-hi);
}
.signin-sub{ margin:10px 0 0; font:400 15px/1.45 var(--au-body); color:var(--au-muted); }
.signin-sub[hidden]{ display:none; }
/* Why you are here (?next=). A note, not a box: a bordered panel above
   the fields read as one more field to fill in. */
.signin-context{
  margin:16px 0 0; padding:1px 0 1px 12px;
  font:450 13.5px/1.45 var(--au-body); color:var(--au-text-2);
  border-left:1px solid var(--au-line);
}
.signin-context[hidden]{ display:none; }

#signin-form, #recover-form{ display:grid; gap:22px; }
#recover-form[hidden], #signin-form[hidden]{ display:none; }

/* ═══ THE FIELD ════════════════════════════════════════════════════════════
   Engineered, not fancy (§062): a 52px control, an 8px radius, a surface a
   step above the canvas, a border that brightens on hover, and a focus that
   is unmistakable: a white edge and a white ring, 2px of white in all, never
   glow alone (§185–186). The label is always visible (§067, §197). */
#signin .field{ display:grid; gap:8px; margin:0; }
#signin .field[hidden]{ display:none; }
#signin .field label{
  display:block; margin:0;
  font:500 13.5px/1.3 var(--au-body); letter-spacing:0; text-transform:none;
  color:var(--au-text-2);
}
#signin .field input:is([type="text"],[type="email"],[type="password"]),
#signin .field-with-affix{
  width:100%; min-height:var(--au-h); margin:0;
  background:var(--au-field);
  border:1px solid var(--au-line); border-radius:var(--au-r);
  box-shadow:none;
  transition:border-color var(--au-fast) var(--au-ease), background-color var(--au-fast) var(--au-ease), box-shadow var(--au-fast) var(--au-ease);
}
#signin .field input:is([type="text"],[type="email"],[type="password"]){
  padding:0 16px;
  font:450 16px/1.2 var(--au-body);        /* 16px: no zoom on iOS focus */
  color:var(--au-text);
  caret-color:var(--au-text-hi);
  outline:none;
}
#signin .field input::placeholder{ color:#6E6E6E; opacity:1; }
#signin .field input:hover, #signin .field-with-affix:hover{ border-color:var(--au-line-hi); }
#signin .field input:focus,
#signin .field-with-affix:focus-within{
  border-color:var(--au-text-hi);
  box-shadow:0 0 0 1px var(--au-text-hi);
  background:var(--au-field-hi);
}
/* THE PASSWORD FIELD. One field, one border. The wrapper draws it; the input sits
   inside borderless and ends before the eye, so a password manager's icon is
   placed against the input's own edge, not on top of the eye (§265–266). */
#signin .field-with-affix{ display:flex; align-items:center; padding-right:4px; }
#signin .field-with-affix input:is([type="text"],[type="password"]){
  flex:1; min-width:0;
  min-height:calc(var(--au-h) - 2px);
  border:0; background:transparent; box-shadow:none;
}
#signin .field-with-affix input:is([type="text"],[type="password"]):focus{ background:transparent; box-shadow:none; }
#signin .field input::-ms-reveal{ display:none; }
/* Autofill on a dark field, kept readable (§073). */
#signin .field input:-webkit-autofill,
#signin .field input:-webkit-autofill:hover,
#signin .field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--au-text);
  caret-color:var(--au-text-hi);
  -webkit-box-shadow:0 0 0 1000px var(--au-field) inset;
  transition:background-color 9999s 0s;
}

/* The eye: inside the field, with no box of its own (§061). A real button,
   its name "Show password" or "Hide password"; 44px to the touch (§194). */
#signin .affix{
  /* app.css's old "SHOW" box sat at top:50% with translateY(-50%). Both are
     undone here, not just the position: left in place they cancelled out at
     rest, and the :active rule below (transform:none) dropped the eye 22px
     on every press. */
  position:relative; top:auto; right:auto; transform:none; flex:0 0 auto;
  display:grid; place-items:center;
  width:44px; height:44px; min-height:0; margin:0; padding:0;
  background:transparent; border:0; border-radius:6px; box-shadow:none;
  color:var(--au-muted); cursor:pointer;
  /* app.css capitalises buttons, and Chrome reads the case into the name:
     "SHOW PASSWORD" is spelt out letter by letter by some screen readers. */
  text-transform:none; letter-spacing:0;
  transition:color var(--au-fast) var(--au-ease);
}
#signin .affix:hover{ color:var(--au-text-hi); background:transparent; }
#signin .affix:active{ background:transparent; transform:none; }
#signin .affix:focus-visible{ outline:2px solid var(--au-text-hi); outline-offset:-3px; }
.affix__eye{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
#signin .affix.is-shown{ color:var(--au-text-hi); }
#signin .affix.is-shown::after{
  content:""; position:absolute; width:21px; height:1.5px; border-radius:1px;
  background:currentColor; transform:rotate(-45deg);
}

/* "Forgot password?" sits on the password label's row (§091) while it comes
   after the field in the document, so the keyboard reaches the field first. */
#signin .field--password{ grid-template-columns:1fr auto; column-gap:12px; }
#signin .field--password > label{ grid-column:1; grid-row:1; align-self:last baseline; }
#signin .field--password > #forgot{ grid-column:2; grid-row:1; justify-self:end; align-self:last baseline; font-size:13px; }
#signin .field--password > .field-with-affix,
#signin .field--password > .field-hint{ grid-column:1 / -1; }

.field-hint{ margin:0; font:400 12.5px/1.45 var(--au-body); color:var(--au-muted); }
.field-hint:empty{ display:none; }
.field-hint[hidden]{ display:none; }
.field-hint.field-hint--warn{ color:var(--attn); }
.field-hint.field-hint--safe{ color:var(--au-muted-2); }

/* ═══ THE ONE BUTTON ═══════════════════════════════════════════════════════
   Machined light: off-white with a faint top-lit gradient, black type, one
   45° cut at the top right. The cut is drawn on a pseudo-element, so the
   button's own focus ring is never clipped by it (§077–079, §248). It never
   grows on hover and never glows; it brightens a step, and darkens a step
   when pressed (§141–142). */
#signin .auth-submit{
  position:relative; isolation:isolate;
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:var(--au-h); margin:4px 0 0; padding:0 20px;
  background:transparent; border:0; border-radius:var(--au-r); box-shadow:none;
  color:#0A0A0A;
  font:600 15px/1 var(--au-body); letter-spacing:.005em;
  cursor:pointer;
}
#signin .auth-submit::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:var(--au-r);
  background:linear-gradient(180deg,#FFFFFF,#F2F2EF 55%,#E3E3DF);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
  clip-path:polygon(0 0,calc(100% - var(--au-cut)) 0,100% var(--au-cut),100% 100%,0 100%);
  transition:filter var(--au-fast) var(--au-ease);
}
#signin .auth-submit:hover{ background:transparent; }
#signin .auth-submit:hover::before{ filter:brightness(1.04); }
#signin .auth-submit:active{ background:transparent; transform:none; }
#signin .auth-submit:active::before{ filter:brightness(.92); }
#signin .auth-submit:focus-visible{ outline:2px solid var(--au-text-hi); outline-offset:3px; }
/* WORKING: the words say it ("Signing in…") and a small ring turns; the
   width never changes and a second press does nothing (§082, §203). */
#signin .auth-submit:disabled{ background:transparent; color:#2A2A2A; cursor:progress; }
#signin .auth-submit:disabled::before{ filter:saturate(0) brightness(.86); }
#signin .auth-submit:disabled::after{
  content:""; width:14px; height:14px; flex:0 0 auto;
  border:1.6px solid rgba(0,0,0,.22); border-top-color:#0A0A0A; border-radius:50%;
  animation:au-spin .8s linear infinite;
}
@keyframes au-spin{ to{ transform:rotate(360deg); } }
/* WAITING (the 30 seconds before a reset link can be sent again): off, but
   nothing is in flight, so no ring. */
#signin .auth-submit.is-waiting{ cursor:default; }
#signin .auth-submit.is-waiting::after{ content:none; }

/* ═══ THE MESSAGE LINE ═════════════════════════════════════════════════════
   One element per form carries what it has to say. page-field.mjs writes it
   through say(), which sets data-tone="bad" for a failure and clears it
   otherwise (lead decision A9). While a button in the form is working, the
   line is not drawn: the button says it, and the line stays in the
   accessibility tree so a screen reader still hears it (§191–192). */
#signin-msg,
#recover-msg{
  margin:-6px 0 0; min-height:0;
  font:450 14px/1.5 var(--au-body);
  color:var(--au-text-2);
}
#signin-msg:empty,
#recover-msg:empty{ display:none; }
#signin-msg:not(:empty),
#recover-msg:not(:empty){
  padding:11px 14px 12px;
  background:var(--au-l1);
  border:1px solid var(--au-hair-2);
  border-left:2px solid var(--au-hair-4);
  border-radius:2px var(--au-r) var(--au-r) 2px;
}
/* FAILED: red edge, red words on a faint red ground (about 7.5:1), and the
   words say what failed, so colour is how it is found, never the only way
   it is known (§196). Calm: no shake, no banner (§085, §138). */
#signin-msg[data-tone="bad"]:not(:empty),
#recover-msg[data-tone="bad"]:not(:empty){
  background:rgb(var(--bad-rgb) / .08);
  border-color:rgb(var(--bad-rgb) / .34);
  border-left-color:var(--bad-mark);
  color:var(--bad);
}
#signin-form:has(#signin-submit:disabled) #signin-msg:not([data-tone="bad"]),
#signin-form[data-mode="sent"] #signin-msg:not([data-tone="bad"]),
#recover-form:has(#recover-submit:disabled) #recover-msg:not([data-tone="bad"]){
  position:absolute; width:1px; height:1px; margin:0; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ═══ THE QUIET ROUTES ═════════════════════════════════════════════════════
   Buttons that read as links: each changes this card's mode rather than
   navigating. A 28px-plus target (§194). */
#signin .linkish{
  display:inline-flex; align-items:center; gap:6px;
  min-height:28px; margin:0; padding:2px 0;
  background:none; border:0; border-radius:3px; box-shadow:none;
  color:var(--au-text);
  font:500 13.5px/1.4 var(--au-body); letter-spacing:0; text-align:left;
  text-decoration:underline; text-decoration-thickness:1px;
  text-decoration-color:rgba(255,255,255,.34); text-underline-offset:4px;
  cursor:pointer;
  transition:color var(--au-fast) var(--au-ease), text-decoration-color var(--au-fast) var(--au-ease);
}
#signin .linkish:hover{ color:var(--au-text-hi); text-decoration-color:var(--au-text-hi); background:none; }
#signin .linkish:active{ background:none; transform:none; }
#signin .linkish:disabled{ background:none; color:var(--au-muted-2); cursor:progress; }
#signin .linkish:focus-visible{ outline:2px solid var(--au-text-hi); outline-offset:3px; }
#signin .linkish--quiet{ color:var(--au-muted); text-decoration-color:rgba(255,255,255,.2); }
#signin .linkish--quiet:hover{ color:var(--au-text); }

/* The second door, under a hairline (§363). */
#customer-switch, #back-switch{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px;
  margin:28px 0 0; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.07);
  font:400 13.5px/1.4 var(--au-body); color:var(--au-muted);
}
#customer-switch[hidden], #back-switch[hidden]{ display:none; }
#customer-switch .linkish{ display:inline; }
#customer-switch .linkish::after{
  content:"\2192" / ""; display:inline-block; margin-left:6px; text-decoration:none; color:var(--au-muted);
}
.auth-ask[hidden]{ display:none; }

/* Development hosts only (dev-host.mjs): staff self-signup. */
#signup-switch{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap; margin:12px 0 0; padding:0; border:0;
}
#signup-switch[hidden]{ display:none; }
.signin-note{
  font:500 10.5px/1 var(--au-mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--au-muted-2); border:1px dashed var(--au-hair-2); border-radius:999px; padding:5px 9px;
}

/* ═══ THE PAGE FAILED ══════════════════════════════════════════════════════
   #boot-error is the one red thing: the script did not finish, and the page
   says so above everything. A full-width bar at the top of the column that
   #app now is, so the sign-in keeps its whole composition under it instead
   of being pushed off the bottom. Text kept to a reading measure; a red
   mark leads it; 7.2:1 on its own wash. */
#boot-error{
  flex:none;
  display:flex; align-items:flex-start; gap:12px;
  max-width:none;
  margin:0;
  padding:max(12px, env(safe-area-inset-top)) max(20px, calc((100% - 720px) / 2)) 13px;
  background:rgb(var(--bad-rgb) / .10);
  border:0;
  border-bottom:1px solid rgb(var(--bad-rgb) / .42);
  border-radius:0;
  color:var(--bad);
  font:500 14px/1.5 var(--au-body);
}
#boot-error::before{
  content:"";
  flex:none;
  width:8px; height:8px; margin-top:7px;
  border-radius:50%;
  background:var(--bad-mark);
}

/* ═══ WHY NOTHING IS LOADING ═══════════════════════════════════════════════
   #setup is an instruction with a person attached (apply the migrations,
   add a role, reconnect), not an error, so it is a quiet panel: the heading
   in display type, the reason in muted body, the steps numbered in mono.
   Amber only on the edge of the ones that block (.is-blocking). It shows on
   the signed-in screen, where app.css's card rule is (2,1,1); these rules
   are (3,0,1) so they are the panel's one look wherever it appears. */
body:has(#setup) #app > #setup{
  max-width:none;
  margin:0 0 24px;
  padding:18px 20px 20px;
  background:var(--au-l1);
  border:1px solid var(--au-hair-2);
  border-radius:12px;
  box-shadow:none;
}
/* A square left edge: an inset bar under a 12px corner curls into a
   crescent. */
body:has(#setup) #app > #setup.is-blocking{
  border-left:3px solid var(--attn-mark);
  border-radius:3px 12px 12px 3px;
}
body:has(#setup) #app > #setup h2{
  margin:0 0 6px;
  font:600 18px/1.3 var(--au-head);
  letter-spacing:-.012em;
  color:var(--au-text-hi);
}
body:has(#setup) #app > #setup p{
  margin:0;
  font:400 14px/1.6 var(--au-body);
  color:var(--au-muted);
}
body:has(#setup) #app > #setup ol{
  display:grid; gap:10px;
  margin:14px 0 0;
  padding:14px 0 0 26px;
  border-top:1px solid var(--au-hair-1);
}
body:has(#setup) #app > #setup li{
  padding-left:4px;
  font:400 14px/1.55 var(--au-body);
  color:var(--au-text-2);
}
body:has(#setup) #app > #setup li::marker{
  font:500 12px/1 var(--au-mono);
  color:var(--au-muted-2);
}

/* ═══ SMALLER SCREENS ══════════════════════════════════════════════════════
   Tablet landscape: two columns, the brand narrower. Portrait and phones: one
   column, the brand a band with the lockup over a crop of the mark, and the
   form below it, where the thumb is. Not the desktop with the left half
   hidden: the band is its own brand moment (§173–176, §385). */
@media (max-width:1180px) and (min-width:901px){
  #signin{ grid-template-columns:minmax(0,45fr) minmax(420px,55fr); }
  .auth-statement__h{ font-size:clamp(34px,4vw,48px); }
}
@media (max-width:900px){
  #signin{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto 1fr;
    grid-template-areas:'world' 'access';
  }
  .auth-world{ min-height:148px; }
  .auth-statement, #signin .auth-back{ display:none; }
  .auth-mark{ width:290px; right:-62px; bottom:auto; top:-46px; }
  #signin .auth-brand{ top:max(22px, env(safe-area-inset-top)); left:20px; }
  .auth-access{
    place-items:start center;
    padding:28px max(20px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  }
  .auth-access::before{ display:none; }
  .signin-title{ font-size:34px; }
  #signin .auth-head{ margin-bottom:24px; }
}
/* A short laptop screen (1366x768): the statement comes up a little so the
   way home never meets it. */
@media (max-height:800px) and (min-width:901px){
  .auth-statement{ bottom:76px; }
  #signin .auth-head{ margin-bottom:26px; }
}
/* Very wide: the form grows a step with the screen, never to a stretched bar. */
@media (min-width:1700px){
  #signin{ grid-template-columns:minmax(0,58fr) minmax(560px,42fr); }
  #signin .auth-card{ max-width:448px; }
  body:has(#signin){ --au-h:56px; }
  .signin-title{ font-size:44px; }
}

/* ═══ MOTION ═══════════════════════════════════════════════════════════════
   Colour and edge transitions at 120ms, and the working ring. Nothing moves
   on load and nothing loops while somebody types (§146–148). Reduced motion
   stops all of it; the ring becomes a still mark. */
@media (prefers-reduced-motion:reduce){
  #signin *{ transition:none !important; }
  #signin .auth-submit:disabled::after{ animation:none; border-top-color:#0A0A0A; }
}

/* ═══ FORCED COLOURS ═══════════════════════════════════════════════════════
   Windows High Contrast drops background images, shadows and transparent
   fills: the word comes back as text, the decorative mark goes, and every
   boundary that meant something is restated in system colours (§353). */
@media (forced-colors:active){
  .auth-word{ width:auto; height:auto; background:none; text-indent:0; overflow:visible; }
  .auth-logo, .auth-mark{ display:none; }
  #signin .auth-submit{ border:1px solid ButtonText; }
  #signin .auth-submit::before{ display:none; }
  #signin .auth-submit:focus-visible{ outline:2px solid Highlight; outline-offset:2px; }
  #signin .field input, #signin .field-with-affix{ border:1px solid ButtonText; }
  #signin-msg:not(:empty), #recover-msg:not(:empty){ border:1px solid CanvasText; }
  #boot-error{ border-bottom:1px solid CanvasText; }
  body:has(#setup) #app > #setup.is-blocking{ border-left-color:CanvasText; }
}