/* ============================================================================
   access-auth-supplement.css — the auth-surface rules that belong to Access,
   layered on top of the shared shell (_content/Vahary.Branding/vahary-auth-shell.css).

   THE ONE RULE FOR THIS FILE: it may only ADD what the shared shell has no
   opinion about. It must never restate, override, or "improve" a shell rule.

   That rule is the whole point. Access used to vendor its own copy of the shell
   (wwwroot/vahary-auth-shell.css) and hand-write the Monument composition around
   it. The copy drifted a generation behind the source — the tokens had been
   renamed to a --vh-* prefix and the class vocabulary to .vh-* — and nothing
   caught it, because a stylesheet that no longer matches its own markup still
   compiles and still passes every test. It only looks wrong. Anything in here
   that duplicates the shell is the beginning of that same divergence, so if a
   rule below ever needs to change because the SHELL changed, it is in the wrong
   file — push it upstream instead.

   What that leaves is almost entirely the MudBlazor adapter. Access's auth
   surfaces are Mud components, not the shell's plain-HTML form: there is no
   .vh-form, .vh-input or .vh-btn-primary on any of these pages, so the shell's
   form spec never applies and the same spec has to be spoken to Mud's own class
   names instead. The shared shell cannot own those — a static-HTML or React
   consumer would never emit them.

   Everything here is expressed in the shell's own --vh-* tokens and hangs off
   .vh-shell, so it inherits the tenant accent and the Night ground rather than
   carrying a second opinion about either. Local class names are prefixed
   `access-`, never `vh-`: that prefix is the package's namespace now, and a
   product class living inside it is a collision waiting to be shipped.

   Load order matters: the package sheet first, this second (App.razor).
   ============================================================================ */

/* The layout's page slot (@Body), on the rhythm of the shell's own form: same rise,
   same 260ms beat, so the Mud content enters with the product noun rather than after it. */
.vh-shell .access-auth-body{
  margin-top:2.2rem;
  animation:vh-rise var(--vh-rise-dur) var(--vh-rise-ease) 260ms both;
}

/* ---------------- typography ---------------- */
.vh-shell .mud-typography{font-family:var(--vh-font-body)}
.vh-shell .mud-typography-h5{font-family:var(--vh-font-display); font-weight:500; color:var(--vh-paper); font-size:1.35rem}
.vh-shell .mud-secondary-text{color:var(--vh-steel)!important}

/* ---------------- inputs: hairline underline on the ground ---------------- */
.vh-shell .mud-input{font-family:var(--vh-font-body); color:var(--vh-paper)}
.vh-shell .mud-input .mud-input-root{
  color:var(--vh-paper); font-size:1.08rem; caret-color:var(--vh-accent-bright);
  background:transparent;
}
/* Text variant (the auth fields): Mud's native underline, recolored to the spec —
   hairline baseline, accent-bright 2px focus scale-in, fault on invalid. */
.vh-shell .mud-input.mud-input-underline .mud-input-root{height:44px}
.vh-shell .mud-input.mud-input-underline:before{border-bottom:1px solid var(--vh-hairline)!important}
.vh-shell .mud-input.mud-input-underline:hover:not(.mud-disabled):before{border-bottom:1px solid var(--vh-steel)!important}
.vh-shell .mud-input.mud-input-underline:after{border-bottom:2px solid var(--vh-accent-bright)}
.vh-shell .mud-input-error .mud-input.mud-input-underline:before,
.vh-shell .mud-input.mud-input-error.mud-input-underline:before{border-bottom-color:var(--vh-fault)!important}
.vh-shell .mud-input.mud-input-error.mud-input-underline:after{border-bottom-color:var(--vh-fault)}
/* Defense in depth: any outlined field that reaches an auth surface loses the box and
   reads as the same hairline (Mud's own selector is 3 classes deep, hence the weight). */
.vh-shell .mud-input.mud-input-outlined .mud-input-outlined-border{
  border:0!important; border-bottom:1px solid var(--vh-hairline)!important;
  border-radius:0!important; background:transparent!important;
}
.vh-shell .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border{
  border-bottom:2px solid var(--vh-accent-bright)!important;
}
.vh-shell .mud-input-error .mud-input-outlined-border,
.vh-shell .mud-input.mud-input-error .mud-input-outlined-border{
  border-bottom-color:var(--vh-fault)!important;
}
.vh-shell .mud-input-label{
  color:var(--vh-steel); font-family:var(--vh-font-mono); font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase;
}
.vh-shell .mud-input-label.mud-input-error,
.vh-shell .mud-input-error .mud-input-label{color:var(--vh-fault)!important}
.vh-shell .mud-input-adornment .mud-icon-root,
.vh-shell .mud-input-adornment .mud-icon-button,
.vh-shell .mud-select .mud-icon-root{color:var(--vh-steel)}
.vh-shell .mud-input-adornment .mud-icon-button:hover{color:var(--vh-paper)}
.vh-shell .mud-input-helper-text{font-family:var(--vh-font-mono); font-size:.64rem; letter-spacing:.08em; color:var(--vh-steel)}
.vh-shell .mud-input-helper-text.mud-error,
.vh-shell .mud-input-error .mud-input-helper-text{color:var(--vh-fault)!important}

/* ---------------- primary button: accent ground, computed ink ---------------- */
/* --vh-accent-ink, not white: the shell computes the button ink server-side for AA
   ≥4.5:1 against whatever accent the tenant configured (the ReadableText rule). */
.vh-shell .mud-button-root.mud-button-filled-primary{
  background:var(--vh-accent); color:var(--vh-accent-ink);
  border-radius:2px; min-height:52px; box-shadow:none;
  font-family:var(--vh-font-body); font-weight:700; font-size:.98rem; text-transform:none;
  position:relative; overflow:hidden;
  transition:filter var(--vh-touch-dur), transform var(--vh-touch-dur);
}
.vh-shell .mud-button-root.mud-button-filled-primary:hover{background:var(--vh-accent); filter:brightness(1.15)}
.vh-shell .mud-button-root.mud-button-filled-primary:active{transform:translateY(1px)}

/* Submitting scan state.
   The SHELL drives its scanline from `vh-s-busy` on the ROOT — `.vh-s-busy .vh-btn-primary
   .vh-btn-scan` — and a class on the button shows nothing at all. That is why this rule exists
   rather than reusing the shell's: there is no .vh-btn-primary and no .vh-btn-scan element on any
   Access auth surface, only a Mud button whose internals we do not author, so the scan has to be a
   ::after of our own. It is toggled per-button because Access has surfaces with two of them.
   Named `access-busy` (it was `vh-busy`) so it can never be mistaken for the shell's own state
   class, which is the ROOT-level one and behaves differently.
   MudBlazor drops the color class while disabled, so this carries the accent ground itself. */
.vh-shell .mud-button-root.access-busy,
.vh-shell .mud-button-root.access-busy.mud-disabled{
  background:var(--vh-accent)!important; color:var(--vh-accent-ink)!important;
  border-radius:2px; min-height:52px; box-shadow:none;
  font-family:var(--vh-font-body); font-weight:700; font-size:.98rem; text-transform:none;
  position:relative; overflow:hidden; opacity:.9;
}
.vh-shell .mud-button-root.access-busy::after{
  content:""; position:absolute; left:0; top:0; height:100%; width:38%;
  background:linear-gradient(90deg,transparent,rgba(216,201,247,.5),transparent);
  animation:vh-scanmove 900ms cubic-bezier(.4,0,.2,1) infinite;
}
.vh-shell .mud-button-root.access-busy .mud-button-label{opacity:.85}
.vh-shell .mud-button-root.access-busy .mud-progress-circular{color:var(--vh-accent-ink)}

/* Secondary actions: quiet text / hairline outline. */
.vh-shell .mud-button-root.mud-button-text{color:var(--vh-steel); text-transform:none; font-family:var(--vh-font-body)}
.vh-shell .mud-button-root.mud-button-text:hover{color:var(--vahary-violet-tint, #D8C9F7); background:transparent}
.vh-shell .mud-button-root.mud-button-outlined{
  color:var(--vh-steel); text-transform:none; font-family:var(--vh-font-body);
  border:1px solid var(--vh-hairline); border-radius:2px;
}
.vh-shell .mud-button-root.mud-button-outlined:hover{color:var(--vh-paper); border-color:var(--vh-steel); background:transparent}

/* ---------------- checkbox + links ---------------- */
.vh-shell .mud-checkbox{color:var(--vh-steel)}
.vh-shell .mud-checkbox .mud-typography{font-size:.82rem; color:var(--vh-steel)}
.vh-shell .mud-checkbox .mud-icon-root{color:inherit}
.vh-shell .mud-checkbox span.mud-primary-text{color:var(--vh-accent-bright)!important}
.vh-shell .mud-link{color:var(--vahary-violet-tint, #D8C9F7); font-size:.82rem}
.vh-shell .mud-link:hover{text-decoration:underline}

/* ---------------- alerts: hairline rules, never a filled box ----------------
   This is where Access reports every failure. Note what it does NOT do: it never gates
   visibility on a state class. The shell's own .vh-error is hidden until the ROOT carries
   vh-s-error, which is the one way this migration could have silently broken a sign-in —
   a failure rendered invisibly. A Mud alert shows because the page rendered it, full stop.
   (AuthLayout still raises vh-s-error via AuthShellErrorState, so the root state is TRUE and
   the first .vh-error anyone adds here will work.) */
.vh-shell .mud-alert{
  background:transparent!important; border-radius:0; box-shadow:none;
  padding:.7rem 0; color:var(--vh-paper); font-size:.86rem; line-height:1.45;
  animation:vh-rise 200ms var(--vh-rise-ease) both;
}
.vh-shell .mud-alert .mud-alert-position{padding:0; justify-content:flex-start}
.vh-shell .mud-alert-message{color:inherit; padding:0}
/* Error → fault-red hairlines (the shell's .vh-error treatment, spoken to Mud). */
.vh-shell .mud-alert-filled-error,.vh-shell .mud-alert-outlined-error,.vh-shell .mud-alert-text-error{
  border-top:1px solid rgba(248,113,113,.4); border-bottom:1px solid rgba(248,113,113,.4);
}
.vh-shell .mud-alert-filled-error .mud-icon-root,.vh-shell .mud-alert-outlined-error .mud-icon-root,.vh-shell .mud-alert-text-error .mud-icon-root{color:var(--vh-fault)}
/* Success → accent hairlines (violet = healthy; green is not in the LED language). */
.vh-shell .mud-alert-filled-success,.vh-shell .mud-alert-outlined-success,.vh-shell .mud-alert-text-success{
  border-top:1px solid rgba(var(--vh-accent-rgb),.4); border-bottom:1px solid rgba(var(--vh-accent-rgb),.4);
}
.vh-shell .mud-alert-filled-success .mud-icon-root,.vh-shell .mud-alert-outlined-success .mud-icon-root,.vh-shell .mud-alert-text-success .mud-icon-root{color:var(--vh-accent-bright)}
/* Warning → attention amber; info → plain hairline. */
.vh-shell .mud-alert-filled-warning,.vh-shell .mud-alert-outlined-warning,.vh-shell .mud-alert-text-warning{
  border-top:1px solid rgba(217,119,6,.45); border-bottom:1px solid rgba(217,119,6,.45);
}
.vh-shell .mud-alert-filled-warning .mud-icon-root,.vh-shell .mud-alert-outlined-warning .mud-icon-root,.vh-shell .mud-alert-text-warning .mud-icon-root{color:var(--vh-attention)}
.vh-shell .mud-alert-filled-info,.vh-shell .mud-alert-outlined-info,.vh-shell .mud-alert-text-info{
  border-top:1px solid var(--vh-hairline); border-bottom:1px solid var(--vh-hairline);
}
.vh-shell .mud-alert-filled-info .mud-icon-root,.vh-shell .mud-alert-outlined-info .mud-icon-root,.vh-shell .mud-alert-text-info .mud-icon-root{color:var(--vh-steel)}

/* ---------------- misc ---------------- */
.vh-shell .mud-progress-circular{color:var(--vh-accent-bright)}
.vh-shell .mud-icon-root.mud-error-text{color:var(--vh-fault)!important}
.vh-shell .mud-icon-root.mud-success-text{color:var(--vh-accent-bright)!important}
.vh-shell .mud-icon-root.mud-warning-text{color:var(--vh-attention)!important}

/* The composed still (mirrors the shell's reduced-motion block for the motion THIS file owns —
   the shell parks its own). */
@media (prefers-reduced-motion: reduce){
  .vh-shell .access-auth-body{animation:none; opacity:1; transform:none}
  .vh-shell .mud-alert{animation:none; opacity:1; transform:none}
  .vh-shell .mud-button-root.access-busy::after{display:none}
}