/* AEA branding for the pages Gitea renders itself.
 *
 * Loaded on every page through custom/header.tmpl, so it is kept small and,
 * apart from the two variables below, scoped to the sign-in page. The rest of
 * the instance keeps Gitea's own palette on purpose: restyling repository,
 * issue and pull request pages means overriding colour variables that move
 * between Gitea releases, and the breakage shows up as unreadable text on a
 * page nobody looks at until they need it.
 */

:root {
  --aea-blue: #2c5479;
  /* The brand blue lifted just far enough to separate from Gitea's dark
   * surface while white button text still measures 5.2:1 against it. The
   * obvious lift, #5b8cb8, looks better and measures 3.6:1, which fails AA
   * for the 14 px bold label sitting on it. */
  --aea-blue-lift: #3d6f9e;
}

/* ------------------------------------------------------------------ *
 * Sign-in page
 * ------------------------------------------------------------------ */

/* The AEA mark above the form. Decorative -- the page already has a heading
 * and the notice below names the company -- so it is a background image on a
 * pseudo-element rather than an <img> with alt text.
 *
 * --aea-logo is set in custom/header.tmpl so this file never has to know the
 * asset prefix. */
/* LENGTHS IN THIS FILE ARE px, NOT rem, AND THAT IS DELIBERATE.
 *
 * Gitea ships `html,body{font-size:14px}`, so 1rem is 14px on every page this
 * stylesheet reaches -- while it is 16px on the landing page, which is a
 * standalone document. Every rem here was written against the 16px assumption
 * and rendered 12.5% smaller than intended: the notice below asked for 0.78rem
 * and drew at 10.92px.
 *
 * px costs nothing in exchange. The usual reason to prefer rem is that it
 * honours a reader who has raised their browser's default font size, but
 * Gitea's own declaration is an absolute px value, so that preference is
 * already overridden on every page here before this file loads.
 */

.page-content.user.signin::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin: 40px auto 4px;
  background: var(--aea-logo) center / contain no-repeat;
}

/* Brand blue on the submit button, and only here. Gitea derives the button
 * background from --color-primary, so setting the variable on this subtree
 * carries the hover and focus states with it instead of needing a rule each. */
.page-content.user.signin {
  --color-primary: var(--aea-blue);
  --color-primary-dark-1: #26496a;
  --color-primary-dark-2: #203e5b;
  --color-primary-light-1: #35648e;
}

/* #2c5479 against Gitea's dark surface is legible but sits close to the
 * background; lift it there. gitea-auto follows the OS, so it needs the media
 * query below as well as the explicit dark theme -- and the dark branch is
 * written first because gitea-auto has to fall back to it when a browser
 * reports no preference at all.
 *
 * dark-1 and dark-2 stay DARKER than the primary, as their names say: Gitea
 * uses dark-1 for hover, and a hover state that gets lighter on a dark theme
 * is where the contrast would quietly drop back below AA. */
:root[data-theme="gitea-dark"] .page-content.user.signin,
:root[data-theme="gitea-auto"] .page-content.user.signin {
  --color-primary: var(--aea-blue-lift);
  --color-primary-dark-1: #36628c;
  --color-primary-dark-2: #2f5579;
  --color-primary-light-1: #4a7fb0;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="gitea-auto"] .page-content.user.signin {
    --color-primary: var(--aea-blue);
    --color-primary-dark-1: #26496a;
    --color-primary-dark-2: #203e5b;
    --color-primary-light-1: #35648e;
  }
}

/* 12.5px, which is what 0.78rem was reaching for. It had been drawing at
 * 10.92px -- smaller than the same sentence on the landing page, and the one
 * piece of copy on either page that has to be readable to mean anything. */
.aea-signin-notice {
  max-width: 672px;
  margin: 8px auto 48px;
  padding: 0 24px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--color-text-light-2);
  text-wrap: pretty;
}

.aea-signin-notice strong {
  color: var(--color-text-light-1);
  font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * Touch devices
 * ------------------------------------------------------------------ */

/* Stop iOS Safari zooming the page when a field takes focus.
 *
 * Safari zooms to fill the viewport whenever a focused control's text is under
 * 16px, and does not zoom back out when the field is blurred -- the rest of the
 * session is spent on a page wider than the screen. Gitea's controls are 14px,
 * so every form on this instance did it. It is the one thing on a phone you
 * cannot work around, because the recovery is a manual pinch.
 *
 * Deliberately NOT scoped to the sign-in page, unlike everything above. The
 * rule this file otherwise follows -- leave the app alone, its colour variables
 * move between releases -- is about not restyling pages. This changes no
 * colour and no layout; it corrects a browser behaviour that makes search
 * boxes, issue comments and PR review forms hostile on a phone.
 *
 * pointer: coarse rather than a width query, because the zoom is a property of
 * the input method, not the screen. An iPad in landscape is 1024px wide and
 * does it too. A touchscreen laptop matches and gets 16px fields, which is
 * harmless.
 */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select {
    font-size: 16px;
  }
}