/* style.css — the pages of the auth gateway (module auth) on the tokens of tokens.css (schemes definition design, rules of the
   login pages): one column, centred; the mark and the name on top in the night-blue head, the maker's small line at the bottom;
   label above the field, one primary button; an error says what to do and never stands beside a figure.
   version: 0.2.0 · created 2026-10-04 by Pascal Ehlig, ITS · edited 2026-10-04 by Pascal Ehlig, ITS */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font); line-height: var(--line); -webkit-text-size-adjust: 100%; }
body { margin: var(--s-0); min-height: 100vh; display: flex; flex-direction: column; background: var(--c-bg); color: var(--c-text); font-size: var(--text-base); }
h1, p { margin: var(--s-0); }
[hidden] { display: none !important; }
:focus-visible { outline: var(--focus) solid var(--c-focus); outline-offset: var(--focus-offset); border-radius: var(--radius-control); }
.lead { background: radial-gradient(120% 140% at 50% 0%, var(--c-surface) 0%, var(--c-bg) 70%); color: var(--c-text); border-bottom: var(--border) solid var(--c-border);
  display: grid; justify-items: center; gap: var(--s-8); padding: var(--s-32) var(--s-16) var(--s-64); position: relative; }
.lead::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(1px 1px at 12% 18%, var(--c-text) 50%, transparent 51%), radial-gradient(1px 1px at 78% 22%, var(--c-text) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 72%, var(--c-line) 50%, transparent 51%), radial-gradient(1px 1px at 22% 80%, var(--c-text) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 58%, var(--c-text) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 38% 34%, var(--c-line) 50%, transparent 51%); }
.mark { width: var(--s-64); height: var(--s-64); overflow: visible; }
.lead.plain { padding-top: var(--s-16); }
.lead.plain .mark { width: var(--s-40); height: var(--s-40); }
.mark polyline { fill: none; stroke: var(--c-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mark .star { fill: var(--c-line); }
.mark .core { fill: var(--c-accent); }
.mark .halo { fill: var(--c-accent); opacity: .2; }
.word { letter-spacing: .3em; padding-left: .3em; text-transform: lowercase; font-weight: var(--weight-strong); }
main { width: min(26rem, calc(100vw - var(--s-32))); margin: calc(var(--s-48) * -1) auto var(--s-24); padding: var(--s-24); position: relative; display: grid; gap: var(--s-16);
  background: var(--c-surface); border: var(--border) solid var(--c-border); border-top: var(--focus) solid var(--c-line); border-radius: var(--radius-surface); }
h1 { font-size: var(--text-h2); line-height: 1.25; }
.muted { color: var(--c-muted); }
form { display: grid; gap: var(--s-16); }
.field { display: grid; gap: var(--s-4); }
label { font-weight: var(--weight-strong); }
input[type="text"], input[type="password"] { font: inherit; color: var(--c-text); background: var(--c-raised); border: var(--border) solid var(--c-control); border-radius: var(--radius-control);
  min-height: var(--control); padding: var(--s-8) var(--s-12); width: 100%; }
.btn { font: inherit; font-weight: var(--weight-strong); display: inline-flex; align-items: center; justify-content: center; min-height: var(--control); padding: var(--s-4) var(--s-16);
  border-radius: var(--radius-control); border: var(--border) solid var(--c-control); background: var(--c-surface); color: var(--c-link); cursor: pointer; text-decoration: none;
  transition: background var(--motion-fast) var(--ease); }
.btn:hover { background: var(--c-sunken); }
.btn.primary { background: var(--c-action); border-color: var(--c-action); color: var(--c-on-action); width: 100%; }
.btn.primary:hover { filter: brightness(1.1); }
.links { display: grid; gap: var(--s-8); }
.problem { padding: var(--s-12) var(--s-16); border: var(--border) solid var(--c-danger); border-radius: var(--radius-control); background: var(--c-danger-bg); }
.problem::before { content: attr(data-mark); display: block; color: var(--c-danger); font-weight: var(--weight-strong); }
.by { margin-top: auto; padding: var(--s-16); text-align: center; font-size: var(--text-small); color: var(--c-muted); }