/* 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.
   0.5.0 (auth 0.7.0): the footer slots of the host's layout (legal links, maker, version) and the legal pages (a wider prose column).
   version: 0.5.0 · created 2026-10-04 by Pascal Ehlig, ITS · edited 2026-10-07 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-24) var(--s-16) var(--s-48); 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-48); height: var(--s-48); 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(24rem, calc(100vw - var(--s-32))); margin: calc(var(--s-32) * -1) auto var(--s-24); padding: var(--s-16) var(--s-24) var(--s-16); position: relative; display: grid; gap: var(--s-12);
  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-12); }
.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); }
/* the further ways (1005j-Q12) and the provided controls (1005k, PLAN-sessions 8): the "scheme" button — small, muted; dashed while
   planned, solid while it needs setup; pressing it opens its info box (a details) with a faint drawing behind heading and text */
.more { list-style: none; margin: var(--s-0); padding: var(--s-12) var(--s-0) var(--s-0); border-top: var(--border) solid var(--c-border); display: grid; gap: var(--s-8); }
.more li { display: grid; }
.btn.way { min-height: var(--target); font-size: var(--text-small); }
.provided { display: grid; gap: var(--s-8); }
.provided summary { list-style: none; color: var(--c-muted); background: var(--c-surface); }
.provided summary::-webkit-details-marker { display: none; }
.provided.planned summary { border-style: dashed; }
.provided.setup summary { border-style: solid; }
.provided[open] summary { background: var(--c-sunken); color: var(--c-text); }
.provided .box { position: relative; overflow: hidden; display: grid; gap: var(--s-4); padding: var(--s-12) var(--s-16); border: var(--border) solid var(--c-border);
  border-radius: var(--radius-control); background: var(--c-raised); line-height: var(--lh-prose); }
.provided.planned .box { border-style: dashed; }
.provided .box h2 { font-size: var(--text-base); line-height: var(--lh-head); margin: var(--s-0); position: relative; }
.provided .box p { position: relative; color: var(--c-text); }
.drawing { position: absolute; right: calc(var(--s-8) * -1); bottom: calc(var(--s-8) * -1); width: 9rem; height: 6rem; opacity: .14; pointer-events: none; }
.drawing .grid { stroke: var(--c-line); stroke-width: .5; fill: none; }
.drawing .outline { stroke: var(--c-text); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.provided.planned .drawing .outline { stroke-dasharray: 4 3; }
.drawing .tick { stroke: var(--c-ok); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.provided-fields { border: var(--border) solid var(--c-control); border-radius: var(--radius-control); margin: var(--s-0); padding: var(--s-12); display: grid; gap: var(--s-12); }
.provided-fields input { opacity: .6; }
.provided.login summary { min-height: var(--control); font-size: var(--text-base); }
.auto { display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); color: var(--c-muted); font-size: var(--text-small); font-variant-numeric: tabular-nums; }
.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); }
.foot { margin-top: auto; padding: var(--s-16); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-8) var(--s-16);
  font-size: var(--text-small); color: var(--c-muted); }
.foot .legal, .languages { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-12); }
.foot a, .languages a, .prose .text a { color: var(--c-link); }
.foot .version { font-variant-numeric: tabular-nums; }
main.prose { width: min(var(--measure), calc(100vw - var(--s-32))); line-height: var(--lh-prose); }
.prose .text { display: grid; gap: var(--s-12); overflow-wrap: anywhere; }
.prose .text h2, .prose .text h3, .prose .text h4 { margin: var(--s-8) var(--s-0) var(--s-0); line-height: var(--lh-head); }
.prose .text h2 { font-size: var(--text-h2); }
.prose .text h3, .prose .text h4 { font-size: var(--text-base); }
.prose .text ul { margin: var(--s-0); padding-left: var(--s-24); }