/* ALP look for the self-hosted apps, taken from the alpagency.net site (~/Projects/alp/apps/portfolio): Peyda, the
   near-black ground, hairline white borders, cyan focus, the brand gradient only as a thin ring. Light mode keeps the
   same structure on the start page's light neutrals. Served at /alp-theme/; each app's stylesheet starts with this. */
@font-face { font-family: Peyda; src: url("https://login.alpagency.net/alp-theme/fonts/peyda-regular-fanum.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Peyda; src: url("https://login.alpagency.net/alp-theme/fonts/peyda-medium-fanum.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: Peyda; src: url("https://login.alpagency.net/alp-theme/fonts/peyda-bold-fanum.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: PeydaLatin; src: url("https://login.alpagency.net/alp-theme/fonts/peyda-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: PeydaLatin; src: url("https://login.alpagency.net/alp-theme/fonts/peyda-medium.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: PeydaLatin; src: url("https://login.alpagency.net/alp-theme/fonts/peyda-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --alp-ground: #f6f6fa; --alp-field: rgb(15 14 28 / .04); --alp-field-hover: rgb(15 14 28 / .06);
  --alp-ink: #0f0e1c; --alp-ink-2: #36354d; --alp-muted: #66657e; --alp-subtle: #8f8ea6;
  --alp-hairline: rgb(15 14 28 / .09); --alp-border: rgb(85 80 237 / .22); --alp-border-hover: rgb(85 80 237 / .36);
  --alp-border-focus: #5550ed; --alp-focus-ring: rgb(85 80 237 / .12);
  --alp-button-fill: #ffffff; --alp-button-ink: #0f0e1c;
  --alp-cyan: #55d7ff; --alp-indigo: #5550ed; --alp-danger: #d6342b;
  --alp-gradient: linear-gradient(135deg, #55d7ff -3%, #5550ed 98%);
  /* Latin first: Authelia's text is English; Persian falls through to Peyda with Persian digits. */
  --alp-font: PeydaLatin, Peyda, system-ui, sans-serif;
  --alp-butter: cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --alp-ground: #02010e; --alp-field: rgb(255 255 255 / .06); --alp-field-hover: rgb(255 255 255 / .085);
    --alp-ink: #dfdeef; --alp-ink-2: #c7c6d6; --alp-muted: #a1a0b5; --alp-subtle: #6f6e84;
    --alp-hairline: rgb(255 255 255 / .09); --alp-border: rgb(86 197 253 / .2); --alp-border-hover: rgb(112 211 255 / .32);
    --alp-border-focus: rgb(86 197 253 / .7); --alp-focus-ring: rgb(85 215 255 / .08);
    --alp-button-fill: #0f0e1c; --alp-button-ink: #dfdeef; --alp-danger: #ff6b6b;
  }
}

/* login.alpagency.net (Authelia 4.39): its Tailwind colour variables mapped onto ours. Laid out like the site rather
   than a floating card: the mark in the page corner like the site header, a start-aligned column on the plain ground,
   the site's section heading (label, heading, hairline), its inputs, and its button (gradient ring, dark fill). */
:root, [data-theme] {
  --background: var(--alp-ground); --foreground: var(--alp-ink);
  --card: var(--alp-ground); --card-foreground: var(--alp-ink);
  --popover: var(--alp-ground); --popover-foreground: var(--alp-ink);
  --primary: var(--alp-indigo); --primary-foreground: #fff;
  --muted: var(--alp-field); --muted-foreground: var(--alp-muted);
  --accent: var(--alp-field-hover); --accent-foreground: var(--alp-ink);
  --destructive: var(--alp-danger);
  --border: var(--alp-hairline); --input: var(--alp-border); --ring: var(--alp-cyan);
  --radius: 16px; --custom-icon: var(--alp-ink);
  --font-sans: var(--alp-font);
}
/* Peyda's space is narrow (0.13 em), so Latin words run together without a little extra. */
html, body { background: var(--alp-ground); color: var(--alp-ink); font-family: var(--alp-font); word-spacing: .12em; }
::selection { background: rgb(79 75 235 / .46); }
:focus-visible { outline: 2px solid var(--alp-cyan); outline-offset: 3px; }

/* The mark sits in the top corner, like the site header. */
#UserSvg { display: none; }
div:has(> #UserSvg) {
  position: fixed; top: 22px; inset-inline-start: 28px; width: 41px; height: 32px; padding: 0 !important;
  background: var(--alp-ink);
  -webkit-mask: url("https://login.alpagency.net/alp-theme/logo.svg") center / contain no-repeat; mask: url("https://login.alpagency.net/alp-theme/logo.svg") center / contain no-repeat;
}

/* A plain column on the ground, text aligned to the start. */
#first-factor-stage, #root [id$="-stage"] { text-align: start; }
#first-factor-stage > div, #root [id$="-stage"] > div { max-width: 380px; padding-inline: 20px; }

/* The site's section heading: small bold label, heading, then a hairline. */
h5 {
  font-weight: 700 !important; font-size: 30px !important; line-height: 1.15; color: var(--alp-ink);
  padding-bottom: 18px; margin-bottom: 10px; border-bottom: 1px solid var(--alp-hairline);
}
h5::before {
  content: "alpagency.net"; display: block; margin-bottom: 10px;
  font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--alp-muted); word-spacing: normal;
}

/* Inputs from the site's project form. */
input[data-slot="floating-input"] {
  height: 52px; border-radius: 16px; border-color: var(--alp-border); background: var(--alp-field); color: var(--alp-ink);
  transition: border-color 160ms var(--alp-butter), background 160ms var(--alp-butter), box-shadow 160ms var(--alp-butter);
}
input[data-slot="floating-input"]:hover { border-color: var(--alp-border-hover); background: var(--alp-field-hover); }
input[data-slot="floating-input"]:focus,
input[data-slot="floating-input"]:focus-visible { border-color: var(--alp-border-focus); box-shadow: 0 0 0 3px var(--alp-focus-ring); outline: none; }
input[data-slot="floating-input"] + label { color: var(--alp-muted); }
input[data-slot="floating-input"]:focus + label { color: var(--alp-ink-2); }
#remember-checkbox, input[type="checkbox"] { accent-color: var(--alp-indigo); }

/* Primary button: one solid brand colour, so it reads as the thing to press. No gradient, no glow. */
#sign-in-button, #root button[type="submit"] {
  height: 50px; border-radius: 16px; text-transform: none; letter-spacing: 0; word-spacing: .14em;
  font-weight: 600; font-size: 15px; color: #fff; background: var(--alp-indigo); border: 0;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 1px 2px rgb(2 1 14 / .4);
  transition: background 160ms var(--alp-butter), transform 160ms var(--alp-butter);
  cursor: pointer;
}
#sign-in-button:hover, #root button[type="submit"]:hover { background: #6763f2; }
#sign-in-button:active, #root button[type="submit"]:active { background: #4a45d9; transform: translateY(1px); }
#sign-in-button:focus-visible { outline: 2px solid var(--alp-cyan); outline-offset: 3px; }

#language-button { border: 1px solid var(--alp-hairline); padding: 6px 12px; font-size: 14px; color: var(--alp-ink-2); }
#language-button:hover { background: var(--alp-field); }
a { color: var(--alp-muted); }
a:hover { color: var(--alp-ink); }