/*
 * AshuLabs sign-in (auth.ashulabs.com): the look of the Authelia portal.
 *
 * Authelia's markup can't be changed, so the design lives entirely here. The
 * edge injects this file at the end of <head> and serves it, the fonts and
 * the artwork from /ashulabs/ on the same origin, which Authelia's CSP allows
 * ('self' for styles, fonts and images).
 *
 * Layout: a forest panel on the left carries the brand -- the wordmark, one
 * plain statement, and the rising arrow from the "A" mark drawn as a route
 * (route.svg). The form sits on paper to the right, left-aligned. Below
 * 960px the panel becomes a band across the top.
 *
 * Hooks used (Authelia 4.39.28): the theme variables on [data-theme=...],
 * #root, ids ending in "-stage", #sign-in-button, #passkey-sign-in-button,
 * #reset-password-button, img[alt="Logo"], the stage h5. If an upgrade
 * renames them, the page falls back to Authelia's own layout and still works.
 * Re-check after every upgrade (identity/README.md, "Upgrading Authelia").
 *
 * Palette (ashulabs.com):  forest #0c2414  forest-raised #133621
 *   paper #f4f7f2  ink #13261a  primary #1a7727  primary-dark #156420
 *   leaf #39a650  mist #b6c8ba  marigold #f0a020 (only the route's start dot)
 */

@font-face {
  font-family: "Anek Latin";
  src: url("/ashulabs/fonts/anek-latin-latin.woff2") format("woff2");
  font-weight: 500 800;
  font-stretch: 75% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/ashulabs/fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

/* ---- tokens ------------------------------------------------------------ */

:root,
html[data-theme="light"] {
  --al-panel: clamp(380px, 42vw, 620px);
  --al-band: 104px;
  --al-panel-bg: #0c2414;
  --al-panel-ink: #f4f7f2;
  --al-panel-soft: #b6c8ba;
  --al-field: #ffffff;
  --al-hover: rgba(26, 119, 39, 0.06);
  --al-focus: rgba(26, 119, 39, 0.22);
  --al-display: "Anek Latin", "Inter", system-ui, sans-serif;
  --al-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Authelia's own variables */
  --background: #f4f7f2;
  --foreground: #13261a;
  --primary: #1a7727;
  --primary-foreground: #ffffff;
  --muted: #e9efe8;
  --muted-foreground: #4d5d52;
  --accent: #e9efe8;
  --accent-foreground: #13261a;
  --border: #d6dfd7;
  --input: #c3d0c6;
  --ring: #1a7727;
}

html[data-theme="dark"],
html[data-theme="oled"] {
  --al-panel-bg: #133621;
  --al-field: #10291a;
  --al-hover: rgba(57, 166, 80, 0.10);
  --al-focus: rgba(57, 166, 80, 0.30);

  --background: #0c2414;
  --foreground: #f4f7f2;
  /* White on #39a650 is too low-contrast for button text: use forest. */
  --primary: #39a650;
  --primary-foreground: #0c2414;
  --muted: #133621;
  --muted-foreground: #b6c8ba;
  --accent: #133621;
  --accent-foreground: #f4f7f2;
  --border: rgba(182, 200, 186, 0.18);
  --input: rgba(182, 200, 186, 0.30);
  --ring: #39a650;
}

/* ---- base -------------------------------------------------------------- */

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--al-text);
  -webkit-font-smoothing: antialiased;
}

#root {
  position: relative;
  z-index: 1;
}

/* The brand panel (body::before), wordmark (#root::before), statement
   (body::after) and supporting line (#root::after). */
body::before,
body::after,
#root::before,
#root::after {
  position: fixed;
  pointer-events: none;
}

body::before {
  content: "";
  z-index: 0;
  inset: 0 auto 0 0;
  width: var(--al-panel);
  background:
    url("/ashulabs/route.svg") center bottom / cover no-repeat,
    var(--al-panel-bg);
}

#root::before {
  content: "AshuLabs";
  z-index: 2;
  top: 44px;
  left: 56px;
  padding-left: 42px;
  background: url("/ashulabs/mark-white.png") left center / 30px 30px no-repeat;
  color: var(--al-panel-ink);
  font: 700 24px/32px var(--al-display);
  font-stretch: 92%;
  letter-spacing: 0.005em;
}

body::after {
  content: "One sign-in\A for the AshuLabs\A network.";
  white-space: pre;
  z-index: 2;
  top: 132px;
  left: 56px;
  color: var(--al-panel-ink);
  font-family: var(--al-display);
  font-weight: 600;
  font-stretch: 82%;
  font-size: clamp(38px, 3.5vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.012em;
}

#root::after {
  content: "The VPN console, analytics and internal tools. Your password and a second step, every time.";
  z-index: 2;
  top: calc(132px + 3.06 * clamp(38px, 3.5vw, 58px) + 28px);
  left: 56px;
  width: min(360px, calc(var(--al-panel) - 112px));
  color: var(--al-panel-soft);
  font: 400 15px/1.55 var(--al-text);
}

/* Everything Authelia renders moves into the space beside the panel. */
#root > div:not([hidden]) {
  margin-left: var(--al-panel);
}

/* The panel already carries the brand. */
#root img[alt="Logo"] {
  display: none;
}

/* ---- the form ---------------------------------------------------------- */

#root [id$="-stage"] {
  text-align: left;
}
#root [id$="-stage"] > div {
  max-width: 420px;
}

#root [id$="-stage"] h5 {
  font-family: var(--al-display);
  font-weight: 700;
  font-stretch: 90%;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
#first-factor-stage h5::after {
  content: "Use your AshuLabs account.";
  display: block;
  margin-top: 8px;
  font: 400 15px/1.5 var(--al-text);
  color: var(--muted-foreground);
  letter-spacing: 0;
}

/* Two input components: the floating-label one on the sign-in form (.peer)
   and the plain one on other screens (data-slot="input"). */
#root input.peer,
#root input[data-slot="input"] {
  background: var(--al-field);
  border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#root input.peer:hover,
#root input[data-slot="input"]:hover {
  border-color: var(--muted-foreground);
}
#root input.peer:focus,
#root input[data-slot="input"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--al-focus);
}
#root label + input[data-slot="input"],
#root label + div input[data-slot="input"] {
  margin-top: 6px;
}

/* Authelia sets buttons and the divider in capitals; sentence case reads
   calmer and matches the rest of the brand. */
#root .uppercase {
  text-transform: none;
  letter-spacing: 0;
}

/* Every filled button on every screen (sign in, reset, consent, 2FA). */
#root [id$="-stage"] button[data-slot="button"],
#sign-in-button,
#passkey-sign-in-button {
  height: 48px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: none;
}
#root [id$="-stage"] button[data-slot="button"][data-variant="default"]:hover {
  background: #156420;
}
html[data-theme="dark"] #root [id$="-stage"] button[data-slot="button"][data-variant="default"]:hover,
html[data-theme="oled"] #root [id$="-stage"] button[data-slot="button"][data-variant="default"]:hover {
  background: #4fb866;
}

/* Two filled buttons side by side compete. The alternative (a passkey) and
   the way back (cancel) step down to an outline. */
#passkey-sign-in-button,
#root button[id*="cancel"] {
  background: transparent;
  color: var(--foreground);
  border: 1px solid var(--input);
}
#passkey-sign-in-button:hover,
#root button[id*="cancel"]:hover,
html[data-theme] #root [id$="-stage"] button[id*="cancel"]:hover {
  background: var(--al-hover);
  border-color: var(--primary);
}
#passkey-sign-in-button svg {
  color: var(--primary);
}

#reset-password-button {
  font-size: 14px;
  font-weight: 500;
}

#root button:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

#root label {
  font-weight: 400;
}

#root a[href*="authelia.com"] {
  margin-right: auto;
  color: var(--muted-foreground);
  opacity: 0.7;
}

/* ---- narrow screens: the panel becomes a band -------------------------- */

@media (max-width: 959px) {
  body::before {
    inset: 0 0 auto 0;
    width: auto;
    height: var(--al-band);
    /* Sized so the arrowhead lands inside the band, right of the wordmark. */
    background:
      url("/ashulabs/route.svg") left -4px top -180px / 270px auto no-repeat,
      var(--al-panel-bg);
  }
  #root::before {
    top: 36px;
    left: 24px;
  }
  body::after,
  #root::after {
    content: none;
  }
  #root > div:not([hidden]) {
    margin-left: 0;
    padding-top: var(--al-band);
  }
  #root [id$="-stage"] h5 {
    font-size: 30px;
  }
  /* Authelia centres the form in 90vh; under the band that leaves a gap. */
  #root [id$="-stage"] {
    min-height: auto;
    padding: 32px 0 40px;
  }
  /* The language menu moves into the band, in the band's colours. */
  #root > div:not([hidden]) > header {
    position: fixed;
    top: 28px;
    right: 8px;
    z-index: 3;
  }
  #language-button {
    color: var(--al-panel-ink);
  }
  #language-button:hover {
    background: rgba(244, 247, 242, 0.12);
  }
}