/* Skeleton Key — sign-in landing page.
   Loaded only by custom/templates/home.tmpl.

   Every colour defaults to a Forgejo theme token, so the page follows
   whatever theme Forgejo is using (data-theme="forgejo-auto" by default,
   which switches on prefers-color-scheme). The --sk-force-* blocks exist
   only so the on-page Auto/Light/Dark control can override locally without
   mutating Forgejo's own --color-* globals. */

:root {
  --sk-page: var(--color-body);
  --sk-text: var(--color-text);
  --sk-muted: var(--color-text-light-2, #71717a);
  --sk-label: var(--color-text-light-1, #52525b);
  --sk-card: var(--color-card, #fafafa);
  --sk-card-border: var(--color-input-border, #d4d4d8);
  --sk-input-bg: var(--color-input-background, #fff);
  --sk-input-border: var(--color-input-border, #d4d4d8);
  --sk-input-text: var(--color-input-text, #27272a);
  --sk-primary: var(--color-primary, #c2410c);
  --sk-primary-contrast: var(--color-primary-contrast, #fff);
  /* Theme-neutral: reads correctly on both light and dark card colours. */
  --sk-shadow: 0 18px 44px -18px rgba(0, 0, 0, .38), 0 2px 6px rgba(0, 0, 0, .14);
  /* Derived from tokens, NOT hardcoded. A literal light gradient here is what
     made "Auto" render light on a dark system: this element covers the whole
     viewport, so it masked every correctly-themed colour behind it. */
  --sk-stage-bg: radial-gradient(900px 520px at 50% -12%, var(--color-card) 0%, transparent 60%),
                 linear-gradient(168deg, var(--color-body) 0%, var(--color-secondary) 100%);
}

html[data-sk-force="light"] {
  --sk-page: #ffffff; --sk-text: #18181b; --sk-muted: #71717a; --sk-label: #52525b;
  --sk-card: #fafafa; --sk-card-border: #d4d4d8;
  --sk-input-bg: #ffffff; --sk-input-border: #d4d4d8; --sk-input-text: #27272a;
  --sk-primary: #c2410c; --sk-primary-contrast: #ffffff;
  --sk-shadow: 0 18px 44px -18px rgba(24, 24, 27, .28), 0 2px 6px rgba(24, 24, 27, .06);
  --sk-stage-bg: radial-gradient(900px 520px at 50% -12%, #ffffff 0%, transparent 60%),
                 linear-gradient(168deg, #ffffff 0%, #f4f4f5 58%, #ececee 100%);
}

html[data-sk-force="dark"] {
  --sk-page: #171e26; --sk-text: #d2e0f0; --sk-muted: #8c9caf; --sk-label: #aebed0;
  --sk-card: #242d38; --sk-card-border: #445161;
  --sk-input-bg: #2b3642; --sk-input-border: #445161; --sk-input-text: #d2e0f0;
  --sk-primary: #fb923c; --sk-primary-contrast: #000000;
  --sk-shadow: 0 18px 44px -18px rgba(0, 0, 0, .65), 0 2px 6px rgba(0, 0, 0, .35);
  --sk-stage-bg: radial-gradient(900px 520px at 50% -12%, #242d38 0%, transparent 62%),
                 linear-gradient(168deg, #1d262f 0%, #171e26 58%, #131a21 100%);
}

/* This page is a single-purpose sign-in screen: no navigation. */
#navbar { display: none !important; }

/* Layout. The rendered structure is:
     body > div.full.height > .sk-stage
     body > footer.page-footer
   Flexbox pins Forgejo's footer to the bottom without having to know its
   height. The previous `min-height: calc(100vh - 52px)` was wrong twice over:
   52px was a guess at the footer height, and without box-sizing the 40px of
   padding added to it — so the page was always taller than the viewport and
   the footer sat below the fold.
   Safe to restyle body here: this stylesheet is only loaded by home.tmpl. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > .full.height {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  /* Forgejo ships `.full.height{flex-grow:1;padding-bottom:80px}`. That 80px of
     bottom padding lands between the stage and the footer: a fixed-height band
     in the page background colour, sitting directly above the footer and
     travelling with it on resize. Not wanted on a full-height sign-in page. */
  padding-bottom: 0;
}

body > footer.page-footer {
  flex: 0 0 auto;
}

.sk-stage {
  position: relative;
  flex: 1 1 auto;
  box-sizing: border-box;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--sk-stage-bg);
}

.sk-card {
  width: 100%;
  max-width: 400px;
  background: var(--sk-card);
  border: 1px solid var(--sk-card-border);
  border-radius: 14px;
  padding: 40px 34px 36px;
  box-shadow: var(--sk-shadow);
}

.sk-card h1 {
  margin: 0 0 6px;
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -.018em;
  color: var(--sk-text);
}

.sk-lede {
  margin: 0 0 28px;
  font-size: 13.5px;
  color: var(--sk-muted);
}

.sk-card label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sk-label);
  margin: 0 0 7px;
}

.sk-card input[type="text"],
.sk-card input[type="password"],
.sk-card input:not([type]) {
  width: 100%;
  height: 43px;
  padding: 0 13px;
  margin-bottom: 17px;
  background: var(--sk-input-bg);
  border: 1px solid var(--sk-input-border);
  border-radius: 9px;
  color: var(--sk-input-text);
  font-size: 14.5px;
  transition: border-color .12s, box-shadow .12s;
}

.sk-card input:focus {
  outline: none;
  border-color: var(--sk-primary);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--sk-primary) 40%, transparent);
}

.sk-remember {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-weight: 500 !important;
  color: var(--sk-muted) !important;
  margin: 0 0 20px !important;
  font-size: 13px;
}

.sk-remember input { accent-color: var(--sk-primary); }

.sk-submit {
  width: 100%;
  height: 45px;
  margin-top: 9px;
  border: 0;
  border-radius: 9px;
  background: var(--sk-primary);
  color: var(--sk-primary-contrast);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .12s, transform .06s;
}

.sk-submit:hover { filter: brightness(.93); }
.sk-submit:active { transform: translateY(1px); }

/* Theme control — top-right corner */
.sk-themes {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--sk-card);
  border: 1px solid var(--sk-card-border);
  border-radius: 999px;
  box-shadow: var(--sk-shadow);
}

.sk-themes button {
  border: 0;
  background: transparent;
  color: var(--sk-muted);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 999px;
  transition: background .12s, color .12s;
}

.sk-themes button:hover { color: var(--sk-text); }
.sk-themes button[aria-pressed="true"] {
  background: var(--sk-primary);
  color: var(--sk-primary-contrast);
}
.sk-themes button:focus-visible { outline: 2px solid var(--sk-primary); outline-offset: 2px; }

/* Hide the API link from the footer's right-hand links, leaving the language
   selector and Licenses in place. `$=` so it still matches if the instance is
   ever served from a sub-path. */
.page-footer .right-links a[href$="/api/swagger"] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .sk-stage *, .sk-stage *::before, .sk-stage *::after { transition: none !important; }
}