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

   TWO WORLDS.
     LEFT, De Leone   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 De Leone 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 De Leone side: a step deeper */
  /* True neutrals (2026-10-15): they carried a faint blue (#0B0B0C,
     #111214, #16171A), and the ground has no hue (rules 17, 18). */
  --au-bg:#0B0B0B;                        /* the access side */
  --au-field:#121212;                     /* a field at rest */
  --au-field-hi:#171717;                  /* 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:6px;                             /* control radius: rule 8's 6px (2026-10-16; it was 8px, §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: De Leone ══════════════════════════════════════════════════════════ */
.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 deleoneai.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:1px solid var(--focus-edge); outline-offset:3px; }
.auth-logo{
  width:30px; height:auto;
  /* #6D6D6D, solid: the white plate at .42 over the wall (#040404) was the
     same grey and a half-white mark (the owner's rule 5, 2026-10-15). */
  filter:brightness(0) invert(.43);
}
.auth-word{
  display:block; width:86px; height:16px;
  background:url("/assets/wordmark.png") left center/contain no-repeat;
  text-indent:-9999px; overflow:hidden; white-space:nowrap;
  filter:brightness(0) invert(.92);   /* #EBEBEB, solid; it was the white word at .92 (rule 5) */
}

/* 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:#0A0A0A; }   /* 2.2% white over #040404, solid (rule 5) */
.auth-mark__line{ fill:none; stroke:#222222;   /* 12% white over #040404, solid (rule 5) */
   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:1px solid var(--focus-edge); 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, solid, stopping short of the
   top and the foot (§028). It faded at both ends; nothing is faded (rule 5). */
.auth-access::before{
  content:""; position:absolute; left:0; top:18%; bottom:18%; width:1px;
  background:var(--au-split);
}
/* 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, #code-form{ display:grid; gap:22px; }
#recover-form[hidden], #signin-form[hidden], #code-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 a lit edge: the border brightens to --focus-edge with one pixel of halo
   outside it, on a click as on a Tab, never a white ring (owner rule 6; it
   was 2px of white, which is what the owner saw on the chat and called "too
   bright"). 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(--focus-edge);
  outline:1px solid var(--focus-edge); outline-offset:-1px;
  box-shadow:0 0 0 1px var(--focus-halo);
  background:var(--au-field-hi);
}
/* THE EYE IS A STOP OF ITS OWN (2026-10-16). The field lit its whole edge
   for anything inside it, so the eye's own edge was drawn inside a lit field:
   two boxes, one in the other, and no saying which had the focus. The field
   lights for its words; the eye, for itself. */
#signin .field-with-affix:has(.affix:focus){
  border-color:var(--au-line);
  outline:none;
  box-shadow:none;
  background:var(--au-field);
}
/* 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; outline: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:1px solid var(--focus-edge); 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, and solid: a white face, black type, one 45° cut at the top
   right. It was off-white with a top-lit gradient (#FFF to a warm #E3E3DF);
   a white control is solid white, with no hue (rules 5 and 18, as the
   account's and the Office's are). 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 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:#F2F2F2;
  clip-path:polygon(0 0,calc(100% - var(--au-cut)) 0,100% var(--au-cut),100% 100%,0 100%);
  transition:background-color var(--au-fast) var(--au-ease);
}
#signin .auth-submit:hover{ background:transparent; }
#signin .auth-submit:hover::before{ background:#FFFFFF; }
#signin .auth-submit:active{ background:transparent; transform:none; }
#signin .auth-submit:active::before{ background:#DEDEDE; }
#signin .auth-submit:focus-visible{ outline:1px solid var(--focus-edge); 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{ background:#D0D0D0; }
#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,
#code-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,
#code-msg:empty{ display:none; }
#signin-msg:not(:empty),
#recover-msg:not(:empty),
#code-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),
#code-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"]),
#code-form:has(#code-submit:disabled) #code-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:1px solid var(--focus-edge); 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; }
/* The way out of the code (CL-09): another account, by signing this one out. */
.code-other{ margin:-6px 0 0; font:400 13.5px/1.4 var(--au-body); color:var(--au-muted); }
#code-lost{ margin:-10px 0 0; }
#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; }
/* Said as words, as the Office says a label (OF-02): it was letter-spaced
   mono capitals in a dashed capsule. */
.signin-note{
  font:450 12.5px/1.4 var(--au-body);
  color:var(--au-muted-2);
}

/* ═══ 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; }
}

/* THE REBRAND (2026-10-18): the traced TK monogram was the old name's artwork;
   the sign-in's oversized mark is off until it is redrawn from De Leone's Ō. */
#signin .auth-mark{ display:none; }
.auth-names{ display:grid; gap:3px; }
.auth-sub{ display:block; font:500 12px/1.2 var(--body, 'Inter', system-ui, sans-serif); letter-spacing:.01em; color:#A3A3A3; }