/* The login form and the status page of Gamers\Http\EntryGate, under the plate: the crowd grows with the window and fills the bottom.
   The colours are the tokens of splash.css. */
.uvod-ulaz {
    margin-top: calc(var(--g) * 0.16);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    background: rgba(7, 6, 10, 0.82);
    border: 1px solid var(--orange);
    font: bold 12px/1.4 Verdana, Tahoma, sans-serif;
}
.uvod-ulaz label { color: var(--orange-light); text-transform: uppercase; letter-spacing: 0.08em; }
.uvod-ulaz input:is([type=password], [type=text], [type=email]) {
    width: 14em;
    padding: 5px 8px;
    border: 1px solid var(--muted);
    background: var(--ink);
    color: var(--paper);
    font: inherit;
}
/* iOS zooms into a focused field with a font under 16px. */
@media (pointer: coarse) {
    .uvod-ulaz input:is([type=password], [type=text], [type=email]) { font-size: 16px; }
}
.uvod-ulaz input:is([type=password], [type=text], [type=email]):focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.uvod-ulaz button {
    padding: 5px 14px;
    border: 0;
    background: var(--orange);
    color: var(--ink);
    font: inherit;
    text-transform: uppercase;
    cursor: pointer;
}
.uvod-ulaz button:hover, .uvod-ulaz button:focus-visible { background: var(--orange-light); }
.uvod-ulaz-error { flex-basis: 100%; margin: 0; text-align: center; color: #ff6b5a; }
.uvod-ulaz-help { flex-basis: 100%; margin: 0; display: flex; justify-content: center; gap: 16px; font-weight: normal; }
.uvod-ulaz-help a, .uvod-status a { color: var(--orange-light); }
/* The login: one column on a phone, the two fields and the button in one row from 600px. */
.uvod-login { display: grid; grid-template-columns: 1fr; gap: 10px; width: min(100%, 320px); padding: 16px; text-align: left; }
.uvod-login > .uvod-ulaz-help, .uvod-login > .uvod-ulaz-error { grid-column: 1 / -1; }
.uvod-ulaz-field { display: flex; flex-direction: column; gap: 4px; }
.uvod-login .uvod-ulaz-field input { width: 100%; box-sizing: border-box; padding: 8px; }
.uvod-login button { padding: 9px 18px; }
@media (min-width: 600px) {
    .uvod-login { width: auto; grid-template-columns: 14em 14em auto; align-items: end; }
}
.uvod-status { flex-direction: column; max-width: 34em; color: var(--paper); font-weight: normal; text-align: center; }
.uvod-status p { margin: 0; }
.uvod-status-title { color: var(--orange-light); font-weight: bold; text-transform: uppercase; letter-spacing: 0.08em; }
.uvod-status-ok { color: #8fd18f; }
.uvod-status-email { color: var(--orange-light); white-space: nowrap; }
.uvod-status-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.uvod-status-form > p { flex-basis: 100%; }
.uvod-status details { flex-basis: 100%; }
.uvod-status details > :not(summary) { margin: 8px 4px 0; }
.uvod-status summary { display: inline-block; padding: 5px 14px; border: 1px solid var(--orange); color: var(--orange-light); cursor: pointer; text-transform: uppercase; list-style: none; }
.uvod-status summary::-webkit-details-marker { display: none; }
.uvod-status .uvod-status-logout { background: none; border: 1px solid var(--muted); color: var(--muted); }
/* The help page (/uvod/pomoc): one block a way back into an account, the Steam login first. */
.uvod-help { gap: 14px; }
.uvod-help-way { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; width: 100%; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.uvod-help-way > p { flex-basis: 100%; margin: 0; }
.uvod-help-steam { display: inline-block; padding: 7px 16px; background: #171a21; border: 1px solid #66c0f4; color: #c7d5e0; text-decoration: none; text-transform: uppercase; font-weight: bold; }
.uvod-help-steam:hover, .uvod-help-steam:focus-visible { background: #1b2838; color: #ffffff; }