/* =============================================
   Auth page styles  (/auth/login + /auth/register)
   ============================================= */

/* Body takes the page background so it can be flipped by the light theme
   (the light-mode body rule in themes/light-plus.css is !important, so this
   needs its own). The hero artwork sits on top of it as a fixed layer. */
.lg-body {
    background: #1a1a1a;
}

.lg-page {
    /* Theme-aware tokens — dark is the default. themes/light-plus.css has an
       "AUTH PAGES" section that flips these, so new auth-page colours should
       use a token here (or a --fws-* variable) instead of a hardcoded white. */
    --lg-text:       var(--fws-white);         /* "Ou", sign-up line, card copy */
    --lg-text-soft:  rgba(255, 255, 255, .55); /* secondary links */
    --lg-card-bg:    #151515;                  /* form card, recessed vs the page */
    --lg-field-bg:   #1e1e1e;                  /* input fill, one step up from the card */
    --lg-field-text: var(--fws-white);
    --lg-field-ph:   rgba(255, 255, 255, .45); /* placeholders */
    --lg-fold-hover: #262626;                  /* foldable section header hover */
    --lg-error:      #ff6b81;                  /* the status line, when it reports a failure */
    --lg-gap:        .75rem;                   /* vertical rhythm between fields */
    --lg-slant:      26px;                     /* angled side offset */

    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 7.5rem 1.5rem 4rem;
}

/* ---- Title ----
   The title is the one piece of the auth page that sits OUTSIDE the card, so it
   is painted straight onto the hero artwork. That artwork is black + white and
   drawn with background-size: cover, so WHICH patch lands behind the title
   depends on the viewport shape — any fixed colour therefore ends up
   white-on-white at some window sizes (and always, on Lumière+, whose hero is
   white). "difference" inverts the title against whatever is actually behind
   it: white over the artwork's black, black over its white.
   That is why it hardcodes #fff instead of using --lg-text — the token still
   colours the copy INSIDE the card, which sits on an opaque background and
   needs no inversion. */
.lg-title {
    color: #fff;
    mix-blend-mode: difference;
    font-size: clamp(1.5rem, 5vw, 1.9rem);
    font-weight: 500;
    text-align: center;
    margin: 0 0 2.5rem;
}

/* ---- Card ----
   Holds the whole auth flow — fields, forgot link, submit, "Ou", the OAuth
   buttons and the sign-up line — on a fill that is recessed against the page
   background, so the form reads as one block. Only the title stays outside.
   It is opaque: the hero behind it is busy artwork, and a translucent card
   would make the fields unreadable. */
.lg-card {
    background: var(--lg-card-bg);
    padding: 1rem 2rem 1.75rem;
}

/* ---- Form ---- */
.lg-form {
    display: flex;
    flex-direction: column;
}

/* ---- Status line ----
   The only place a failed sign-in is reported. It ships empty AND `hidden`,
   and assets/js/auth.js toggles that attribute — so this rule deliberately
   sets no `display`, which would beat `hidden` and leave a blank gap above
   the fields. The [hidden] guard below says that out loud instead of leaving
   it to the cascade. */
.lg-status {
    margin: 0;
    color: var(--lg-error);
    font-size: .85rem;
    line-height: 1.5;
}

.lg-status[hidden] {
    display: none;
}

/* ---- Second step (two-factor) ----
   Revealed only when the API answers `oauth: true` — a code is required and
   nobody is signed in yet. A plain block: the field inside owns its own
   margin, and `min-width: 0` keeps it from pushing the flex column wider.
   Again, no `display`, so the `hidden` attribute keeps working. */
.lg-2fa {
    min-width: 0;
}

/* ---- The one-time code, six boxes --------------------------------------
   ONE BOX PER DIGIT, and they are SQUARE and SPACED because the code is read
   off a phone: a person holding an authenticator is looking at six separate
   digits and types them one at a time, and six separated targets is what lets
   that happen without them counting characters.

   SQUARE, NOT ROUNDED — every other control on this site is square or cut, and
   a pill here would be the only soft shape in the form. The focused box takes
   the accent, which is the one cue that says where the next digit goes, since
   the script moves the focus itself and the eye needs to follow it.

   `text-align: center` and a large `font-size` rather than a letter-spacing
   hack: a single digit in a centred box needs neither, and letter-spacing on a
   one-character value is a hack that shows up as a trailing gap.

   The row WRAPS on a narrow screen. Six boxes at a fixed width overflow a
   phone viewport otherwise, and an autofilled code is then typed into boxes
   that are off the right edge. */
.lg-otp {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin: var(--lg-gap) 0;
}

.lg-otp-box {
    width: 3rem;
    height: 3.75rem;
    padding: 0;
    /* THE PAGE'S OWN FIELD TOKENS, not the raw --fws-* greys. `.lg-field` uses
       these and they are remapped by the theme files, so a hard-coded surface
       here is a box that does not follow a light theme. */
    background: var(--lg-field-bg);
    color: var(--lg-field-text);
    border: 1px solid transparent;
    font-family: 'Proxima Nova', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    border-radius: 0;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.lg-otp-box:focus {
    outline: none;
    border-color: var(--fws-accent);
    box-shadow: 0 0 0 1px var(--fws-accent);
}

/* A FILLED BOX, shown by a tint and not by a colour change: the digit must
   stay at full contrast to be readable, and somebody glancing at six boxes
   needs to see which five are done without counting them.

   `:placeholder-shown` is the obvious selector and is WRONG HERE — it only
   ever matches an input that HAS a placeholder, and a digit box must not have
   one (a grey 0 in six empty boxes is a digit somebody will try to send). The
   boxes carry `required` and `pattern="[0-9]*"`, so `:valid` is true only once
   a digit is in, which is the state this is asking about. The form is
   `novalidate`, so nothing blocks a submit on it. */
.lg-otp-box:valid {
    background: color-mix(in srgb, var(--fws-accent) 10%, var(--lg-field-bg));
}

.lg-field {
    width: 100%;
    /* y margin so the fields read as separated blocks, not as one column */
    margin: var(--lg-gap) 0;
    padding: 1rem 1.25rem;
    background: var(--lg-field-bg);
    color: var(--lg-field-text);
    font-family: 'Proxima Nova', sans-serif;
    font-size: 1rem;
    border: 1px solid transparent;
    border-radius: 0;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.lg-field::placeholder {
    color: var(--lg-field-ph);
}

.lg-field:focus {
    border-color: var(--fws-red-galaxy);
    box-shadow: 0 0 0 1px var(--fws-red-galaxy);
}

/* ---- Field rows ----
   Puts two fields side by side (display name + username) and lets them wrap
   onto their own line when the card is too narrow. The row owns the vertical
   margin, so the fields inside it don't add a second one. */
.lg-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lg-gap);
    margin: var(--lg-gap) 0;
}

.lg-row > .lg-field,
.lg-row > .lg-field-wrap {
    flex: 1 1 10rem;
    min-width: 0;
    margin: 0;
}

/* ---- Field with a control inside it (the password eye) ---- */
.lg-field-wrap {
    position: relative;
    margin: var(--lg-gap) 0;
}

.lg-field-wrap > .lg-field {
    margin: 0;
    padding-right: 3rem; /* room for the eye button */
}

.lg-eye {
    position: absolute;
    top: 50%;
    right: .9rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .25rem;
    background: none;
    border: none;
    color: var(--lg-text-soft);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: color .2s;
}

.lg-eye:hover {
    color: var(--lg-text);
}

/* ---- Foldable section (optional billing info) ----
   The header reuses the field fill so it reads as part of the form. The panel
   animates with grid-template-rows 0fr -> 1fr, which reaches the content's
   natural height without a magic max-height. */
.lg-fold {
    margin: var(--lg-gap) 0 0;
}

.lg-fold-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: .9rem 1.25rem;
    background: var(--lg-field-bg);
    color: var(--lg-text);
    font-family: 'Proxima Nova', sans-serif;
    font-size: .9rem;
    font-weight: 700;
    text-align: left;
    border: none;
    cursor: pointer;
    transition: background .2s;
}

.lg-fold-toggle:hover {
    background: var(--lg-fold-hover);
}

.lg-fold-chevron {
    flex-shrink: 0;
    font-size: .85rem;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.lg-fold.is-open .lg-fold-chevron {
    transform: rotate(180deg);
}

.lg-fold-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .35s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}

.lg-fold.is-open .lg-fold-panel {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* overflow: hidden is what lets the 0fr row clip the content away; it also
   stops the first field's margin from collapsing out of the box. */
.lg-fold-inner {
    min-height: 0;
    overflow: hidden;
}

/* The last field keeps its top margin only, so the spacing before the submit
   stays owned by .lg-submit. */
.lg-fold-inner > :last-child {
    margin-bottom: 0;
}

.lg-fold-note {
    margin: var(--lg-gap) 0 0;
    color: var(--lg-text-soft);
    font-size: .8rem;
    line-height: 1.5;
}

/* ---- Forgot password ---- */
.lg-forgot {
    align-self: flex-end;
    margin-top: var(--lg-gap);
    color: var(--lg-text-soft);
    font-size: .8rem;
    text-decoration: none;
    transition: color .2s;
}

.lg-forgot:hover {
    color: var(--lg-text);
}

/* ---- Angled buttons ----
   Both shapes are cut with clip-path, so a box-shadow would be clipped away
   with them: the glow uses drop-shadow() instead, which is painted after the
   clip. Deliberately NOT .fws-button — these keep the mockup's mixed-case
   labels and brand colours, so they must stay out of the theme rules that
   repaint .fws-button (Lumière+ forces it black, palettes force it accent). */
.lg-submit,
.lg-oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: var(--fws-white);
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    clip-path: polygon(var(--lg-slant) 0, 100% 0, calc(100% - var(--lg-slant)) 100%, 0 100%);
    transition: filter .2s;
}

.lg-submit:hover,
.lg-oauth-btn:hover {
    filter: brightness(1.1);
}

/* ---- Submit ---- */
.lg-submit {
    margin-top: calc(var(--lg-gap) * 2);
    width: 100%;
    padding: 1rem 1.5rem;
    background: var(--fws-red-galaxy);
    font-size: 1rem;
    letter-spacing: .02em;
}

.lg-submit:hover {
    filter: brightness(1.1) drop-shadow(0 0 14px rgba(211, 28, 62, .45));
}

.lg-submit:active {
    filter: brightness(.95);
}

/* ---- Step two's two escape routes ---------------------------------------
   Cancel and the passkey, side by side under the six boxes.

   `hidden` HAS TO WIN, and it would not without this: `.lg-2fa-actions` is a
   flex row and a class that sets `display: flex` beats the user agent's
   `[hidden] { display: none }` — the same trap this file already documents for
   `.lg-submit`. Without it, the script that hides the row would reveal it. */
.lg-2fa-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    margin-top: var(--lg-gap);
}

.lg-2fa-actions[hidden] {
    display: none;
}

/* Both carry the SAME `min-height` rather than one stretching to the other,
   because the row's default `align-items: stretch` would otherwise let a taller
   child set the height for both and the pair would drift out of line. */
.lg-2fa-cancel,
.lg-2fa-passkey {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    box-sizing: border-box;
}

.lg-2fa-cancel {
    flex: 1 1 10rem;
    padding: .8rem 1.2rem;
    font-size: .75rem;
}

/* THE FINGERPRINT BUTTON, at row size. It borrows the fill of the full-width
   one below (`.lg-oauth-passkey`) rather than the white of Cancel, because it
   is that control: a square, a field fill and a bare glyph. Two of those three
   identify it as the passkey button with no text at all, which is what keeps
   it from reading as a second, unlabelled Cancel.

   THE SLANT SHRINKS WITH THE BUTTON, for the reason main.css spells out on
   `.fws-button-small`: the angle is atan(cut / height), and `.fws-button`'s 15px
   on a ~44px-tall square would read visibly steeper than every other button on
   the site. 12px holds the same ~17°.

   `.fws-button:hover` repaints the fill white, so the hover is restated here —
   login.css loads after main.css, and equal specificity means it wins. */
.lg-2fa-passkey {
    flex: 0 0 auto;
    width: 3.25rem;
    padding: .8rem;
    color: var(--fws-white);
    background: var(--lg-field-bg);
    border-color: var(--lg-field-bg);
    font-size: 1.25rem;
    line-height: 1;
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}

.lg-2fa-passkey:hover {
    background: var(--lg-field-bg);
    border-color: var(--lg-field-bg);
}

.lg-2fa-passkey[hidden] {
    display: none;
}

/* NO FILESYSTEM OF FILLS HERE, DELIBERATELY. Cancel was given `background: none`
   to make it quieter than the passkey, and it came out looking broken: the
   site's button shape is a `clip-path`, and an unfilled button under a
   clip-path draws its border and then cuts it, leaving two horizontal hairlines
   and no sides. Same trap as the vendor panel's ghost button, and the same
   answer: the fix is not a cleverer rule, it is not doing that.

   So both are the plain `.fws-button` the rest of the form uses, and they are
   told apart by their labels — which is how every other pair of controls on
   this page is told apart. The site has no secondary button, and inventing one
   for a single control is how a page ends up with two design languages. */

/* ---- The instruction above the boxes ------------------------------------ */
.lg-2fa-prompt {
    margin: var(--lg-gap) 0 0;
    color: var(--lg-text);
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
}

.lg-2fa-prompt[hidden] {
    display: none;
}

/* ---- "Ou" separator ---- */
.lg-or {
    color: var(--lg-text);
    font-size: .95rem;
    text-align: center;
    margin: var(--lg-gap) 0;
}

/* ---- OAuth buttons (brand colours, never themed) ---- */
.lg-oauth {
    display: flex;
    gap: 1rem;
}

.lg-oauth-btn {
    flex: 1 1 0;
    padding: .85rem;
    font-size: 1.55rem;
    line-height: 1;
}

.lg-oauth-discord { background: #5865f2; }
.lg-oauth-google  { background: #ea4335; }

/* The passkey control is a <button> the script hides on a browser that cannot
   do WebAuthn — not a link, and it has no brand of its own. Without a fill it
   would sit in the row as an empty box beside the two branded ones, so it
   borrows the field fill. */
.lg-oauth-passkey { background: var(--lg-field-bg); }

/* ---- The passkey's own row ----------------------------------------------
   IT REUSES `.lg-oauth-btn` COMPLETELY — same square, same fill, same glyph
   size, same hover. The only thing this rule changes is how WIDE it is, and
   that is the whole of the change to it: the control was the third item in a
   row of three, which made "sign in without a password" the smallest target on
   the page beside two provider logos.

   `flex: 1 1 auto` ON THE BUTTON, and the row is `display: flex` with the same
   `gap` as `.lg-oauth` — so it lines up with the pair below it exactly, rather
   than being a block that happens to be the card's width and drifts from the
   buttons under it by the difference between a flex gap and a margin. */
.lg-passkey-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* `hidden` HAS TO WIN HERE TOO, and it would not without this: a class that
   sets `display: flex` beats the user agent's `[hidden] { display: none }` —
   the same trap this file already documents for `.lg-2fa-actions` and
   `.lg-submit`. Without the guard, `aside.forEach(node => node.hidden = true)`
   in initLoginForm() would set the attribute and change nothing, which is
   exactly how the row stayed on screen under the 2FA step. */
.lg-passkey-row[hidden] {
    display: none;
}

.lg-passkey-row .lg-oauth-btn {
    flex: 1 1 auto;
}

/* ---- Sign-up line ---- */
.lg-signup {
    margin-top: var(--lg-gap);
    color: var(--lg-text);
    font-size: .9rem;
    text-align: center;
}

.lg-signup-link {
    color: var(--lg-text);
    font-weight: 700;
    text-decoration: none;
}

.lg-signup-link:hover {
    text-decoration: underline;
}

/* =============================================
   Forgotten password  (/auth/forgot-password, /auth/reset-password)

   THE ONLY THING HERE THAT IS NEW IS THE SHAPE: three blocks where a login
   page has one, because these two pages have a success state and a dead-end
   state and a form, and each is shown alone. They are all `hidden` in the
   markup and revealed by assets/js/auth.js, so none of them costs anything on
   a page that is not this one.
   ============================================= */

/* The confirmation after a reset was requested, and the "done" after the
   password actually changed. Both replace a form rather than sitting under it —
   a form left on screen is a second click, and a second click on the first one
   mints a second token and invalidates the first mail. */
.lg-forgot-done,
.lg-reset-done {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    color: var(--lg-text);
    font-size: .95rem;
    line-height: 1.65;
    text-align: center;
}

/* The secondary sentence under each — where to look, what just happened to
   their other sessions. Muted so the lead line is the answer and this is the
   detail. */
.lg-forgot-note {
    color: var(--lg-text-dim, var(--lg-text));
    opacity: .75;
    font-size: .85rem;
}

/* The dead end: no token in the URL, or a token the API has already refused.
   Carries the one action that can still help, so it is a button rather than a
   sentence alone. */
.lg-reset-no-token {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    align-items: center;
    color: var(--lg-text);
    font-size: .95rem;
    line-height: 1.65;
    text-align: center;
}

/* An <a> wearing the submit button, for that "ask for a new link" action. The
   button is a flex row with its own padding, so an anchor needs the display set
   or the padding is ignored and the text sits in a bare line. */
.lg-submit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* `hidden` HAS TO WIN over `display: flex` on the three blocks above, and it
   would not without this. A class that sets `display: flex` beats the user
   agent's `[hidden] { display: none }` — the same trap main.css and vendor.css
   both document for their own buttons — so a script that hides one of these
   would reveal it instead. */
.lg-forgot-done[hidden],
.lg-reset-done[hidden],
.lg-reset-no-token[hidden] {
    display: none;
}

/* =============================================
   OAuth consent  (/auth/authorize)
   ============================================= */

/* THE SAME CARD AS THE LOGIN FORM, holding one question instead of two fields.
   The tokens above (.lg-text, .lg-text-soft, .lg-field-bg, .lg-slant) are shared
   on purpose: this is an auth page, so it flips with the light theme in exactly
   the same places and there is no second palette to keep in step.

   NOTHING HERE IS ROUNDED EXCEPT THE AVATAR. The site's shapes rule says the
   only rounded thing is a person's picture, and the auth pages already hold to
   it (fields and buttons are square, the angled buttons are cut with clip-path).
   The application's logo is a square tile for that reason — it is an app, not a
   person. */

/* ---- The application asking ---- */
.lg-consent-app {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .5rem 0 1.25rem;
}

.lg-consent-logo {
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    object-fit: cover;
}

/* A square with a glyph, for a client with no logo — the same "there is no
   picture" surface the navbar and the profile hero draw, in this size. */
.lg-consent-logo-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lg-field-bg);
    color: var(--lg-text-soft);
    font-size: 1.25rem;
}

.lg-consent-app-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lg-consent-app-name {
    font-family: 'Futura PT Medium', sans-serif;
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--lg-text);
    text-decoration: none;
    /* A name is somebody else's string: break it rather than let it push the
       card wider than the page. */
    overflow-wrap: anywhere;
}

a.lg-consent-app-name:hover {
    text-decoration: underline;
}

.lg-consent-app-wants {
    color: var(--lg-text-soft);
    font-size: .9rem;
    line-height: 1.5;
}

/* ---- Who is about to say yes ----
   The half of the screen that prevents a mistake, so it is drawn from the
   session rather than from anything in the request. */
.lg-consent-account {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin: 0 0 1.25rem;
    padding: .875rem 1rem;
    background: var(--lg-field-bg);
}

.lg-consent-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    object-fit: cover;
    flex: 0 0 auto;
}

.lg-consent-avatar-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2a2a2a;
    color: var(--lg-text-soft);
}

.lg-consent-account-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lg-consent-account-name {
    color: var(--lg-text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lg-consent-account-handle {
    color: var(--lg-text-soft);
    font-size: .8rem;
}

/* Pushed to the right of the account row: it is an action ON that account,
   and it reads as one where it sits. */
.lg-consent-switch {
    margin-left: auto;
}

.lg-consent-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--lg-text-soft);
    font: inherit;
    font-size: .8rem;
    text-decoration: underline;
    cursor: pointer;
}

.lg-consent-link:hover {
    color: var(--lg-text);
}

/* ---- What it may do ---- */
.lg-consent-share {
    margin: 0 0 1.5rem;
}

.lg-consent-share-title {
    font-family: 'Futura PT Medium', sans-serif;
    font-weight: 500;
    font-size: .8rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--lg-text-soft);
    margin: 0 0 .75rem;
}

.lg-consent-share-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lg-consent-share-list li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    color: var(--lg-text);
    font-size: .9rem;
    line-height: 1.5;
}

.lg-consent-share-list i {
    flex: 0 0 auto;
    margin-top: .15rem;
    color: var(--fws-green);
}

/* The limit is not a permission, so it is not ticked green: it is the sentence
   that stops the list above reading as a blank cheque. */
.lg-consent-share-list .lg-consent-share-limit {
    color: var(--lg-text-soft);
}

.lg-consent-share-list .lg-consent-share-limit i {
    color: var(--lg-text-soft);
}

/* ---- The failure state ----
   A request nobody can answer, rendered rather than redirected: there is no
   verified destination to send it to. Same card, same tokens. */
.lg-consent-lead {
    margin: .5rem 0 1.25rem;
    color: var(--lg-text-soft);
    font-size: .9rem;
    line-height: 1.55;
}

/* ---- Refuse ----
   The same cut box as .lg-submit, in a neutral fill rather than the brand red:
   both answers are equally real, and neither should look like the mistake. */
.lg-deny {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: var(--lg-gap);
    padding: 1rem 1.5rem;
    border: none;
    background: var(--lg-field-bg);
    color: var(--lg-text);
    font-family: 'Proxima Nova', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    clip-path: polygon(var(--lg-slant) 0, 100% 0, calc(100% - var(--lg-slant)) 100%, 0 100%);
    transition: filter .2s;
}

.lg-deny:hover {
    filter: brightness(1.2);
}

.lg-deny:active {
    filter: brightness(.95);
}