/*
    The whole visual system for the Identity pages, in one file.

    It replaces eight page CSS files that were all being loaded on every page (the `<environment>`
    blocks in _Layout were commented out, so there was never a "CSS per page", only an accidental
    cascade where load order decided the winner) and Bootstrap 3.3.7, which was pulled twice in
    production: once locally, once from a CDN Microsoft shut down.

    The few Bootstrap classes the views actually use are redefined here. The grid ones are the only
    real dependency, and these pages are a single narrow column, so they cost a dozen lines.
*/

/* ---------------------------------------------------------------- fonts ---
   Served from our own origin. They used to come from fonts.googleapis.com, which contacts a third
   party before consent has been asked for, on the one screen where the athlete is handing over a
   password. Same files the application embeds, so the type matches across the seam. */

@font-face {
    font-family: "Open Sans";
    src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans";
    src: url("../fonts/OpenSans-Semibold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans";
    src: url("../fonts/OpenSans-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ----------------------------------------------------------------- base --- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    /* 100vh on a phone means the viewport with the URL bar retracted, which is taller than what is
       actually visible: the page ends up longer than the screen from the start. dvh follows the
       real, changing height. Declared second so browsers without it keep the vh line. */
    min-height: 100vh;
    min-height: 100dvh;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: var(--ows-text-base);
    line-height: 1.5;
    color: var(--ows-ink);
    background-color: var(--ows-ground);
    display: flex;
    flex-direction: column;
}

/* The photograph the native screen shows, so arriving here does not look like arriving somewhere
   else. `fixed` keeps it still while a long page scrolls; the two veils below give the type its
   contrast back. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("../images/login_background_app.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -2;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--ows-veil);
    z-index: -1;
}

/* -------------------------------------------------------------- headings --- */

h1, h2, h3, h4, h5 {
    margin: 0 0 var(--ows-space-3);
    font-weight: var(--ows-weight-bold);
    line-height: 1.25;
    text-wrap: balance;
}

h1, h2 { font-size: var(--ows-text-xl); }
h3, h4 { font-size: var(--ows-text-lg); }

p { margin: 0 0 var(--ows-space-4); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--ows-accent);
    text-decoration: none;
    font-weight: var(--ows-weight-semibold);
}

a:hover { text-decoration: underline; }

/* ----------------------------------------------------------------- focus ---
   The single most important rule in this file. `login.css` carried `*:focus { outline: none }`,
   and because that file was loaded on every page it removed the focus ring from the entire
   Identity surface, terms and password screens included. Anyone navigating by keyboard was moving
   blind. */

:focus-visible {
    outline: 3px solid var(--ows-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Mouse and touch users don't get a ring they never asked for, but it is `:focus-visible` doing
   the filtering, not a blanket removal. */
:focus:not(:focus-visible) {
    outline: none;
}

/* ---------------------------------------------------------------- layout --- */

/* The wrapper _Layout puts around every view. It owns the centring and the measure, because the
   views disagree about their own markup: Login opens with `.container .row .col-md-4`,
   ForgotPassword with a bare `.row`, Lockout with neither. Anchoring the layout here means a page
   is laid out correctly whatever it declares. */
.page {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 0 var(--ows-space-4) var(--ows-space-6);
    flex: 1;
    display: flex;
    flex-direction: column;

    /* A centred flex container whose content is taller than itself overflows in BOTH directions,
       and the part above the top edge cannot be scrolled to: the logo and the first field would be
       unreachable on a short screen. `safe` drops the centring exactly when that would happen and
       falls back to the start edge. The plain `center` above it is the fallback for browsers that
       do not know the keyword. */
    justify-content: center;
    justify-content: safe center;
}

/* Already inside .page, so it only has to stop fighting it. */
.container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Bootstrap's grid, reduced to what these pages use. One column, always: every Identity page is a
   single form no wider than a phone. */
.row { display: block; }

[class^="col-md-"],
[class^="col-sm-"],
[class*=" col-md-"],
[class*=" col-sm-"] {
    width: 100%;
    max-width: none;
    padding: 0;
    float: none;
}

/* The mark, served by _Layout on every page. It links home, so it needs the same 44px target as
   anything else that can be tapped. */
.brand {
    display: block;
    text-align: center;
    text-decoration: none;
}

.brand:hover {
    text-decoration: none;
}

.logo {
    display: inline-block;
    width: 172px;
    max-width: 60%;
    height: auto;
    margin: var(--ows-space-5) auto var(--ows-space-4);
}

/* ----------------------------------------------------------------- panel ---
   Every form and every confirmation message sits on the same sheet, the one anchored at the bottom
   of the native screen. The class list is long because the views name their forms individually;
   they all mean "the panel". */

.page form,
.login-form,
.register-form,
.reset-form,
.confirmation,
.terms,
.panel-sheet {
    background-color: var(--ows-panel);
    border: 1px solid var(--ows-panel-rule);
    border-radius: var(--ows-radius-panel);
    padding: var(--ows-space-5) var(--ows-space-5) var(--ows-space-4);
    margin-bottom: var(--ows-space-5);
    box-shadow: var(--ows-shadow-panel);
}

.login-form h4,
.register-form h4,
.reset-form h4 {
    font-size: var(--ows-text-lg);
    margin-bottom: var(--ows-space-4);
    color: var(--ows-ink);
}

/* The confirmation and lockout pages: a title, a sentence, a way out. */
.confirmation h1,
.confirmation h2 {
    margin-bottom: var(--ows-space-3);
}

.confirmation p {
    margin-bottom: var(--ows-space-5);
    color: var(--ows-ink-soft);
}

/* ------------------------------------------------------------------ form --- */

.form-group {
    margin-bottom: var(--ows-space-3);
}

label,
.label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--ows-text-sm);
    font-weight: var(--ows-weight-semibold);
    color: var(--ows-ink-soft);
    text-transform: none;    /* the old sheets shouted every label in capitals */
    letter-spacing: 0;
}

/* Fields used to be `rgba(255,255,255,.6)` with white text directly over the photograph, so their
   contrast changed with whatever was behind them, and the text the athlete typed was centred.
   A solid ground, a visible hairline, and text that starts at the left like text does. */
.input,
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea {
    display: block;
    width: 100%;
    min-height: var(--ows-target);
    padding: 10px var(--ows-space-4);
    font-family: inherit;
    font-size: var(--ows-text-base);   /* 16px floor: iOS zooms in on anything smaller */
    line-height: 1.4;
    text-align: left;
    color: var(--ows-ink);
    background-color: var(--ows-field);
    border: 1.5px solid var(--ows-field-rule);
    border-radius: var(--ows-radius-field);
    transition: border-color 150ms ease-out;
}

.input::placeholder,
.form-control::placeholder {
    color: var(--ows-ink-muted);
    opacity: 1;
}

.input:hover,
.form-control:hover {
    border-color: var(--ows-field-rule-strong);
}

.input:focus,
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--ows-accent);
}

.input[aria-invalid="true"],
.form-control.input-validation-error,
.input-validation-error {
    border-color: var(--ows-danger);
}

/* --------------------------------------------------------------- buttons --- */

.button,
.btn,
button[type="submit"],
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--ows-target);
    padding: var(--ows-space-3) var(--ows-space-5);
    font-family: inherit;
    font-size: var(--ows-text-base);
    font-weight: var(--ows-weight-bold);
    line-height: 1.2;
    text-align: center;
    text-transform: none;
    color: var(--ows-on-accent);
    background-color: var(--ows-accent);
    border: 0;
    border-radius: var(--ows-radius-field);
    cursor: pointer;
    transition: background-color 150ms ease-out;
}

.button:hover,
.btn:hover,
button[type="submit"]:hover {
    background-color: var(--ows-accent-pressed);
    text-decoration: none;
}

.button:disabled,
.btn:disabled,
button[type="submit"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* The secondary shape: same size and same hit area, no fill. Used for "back", and for anything
   that is not the one thing this page exists to do. */
.btn-default,
.return-button,
.external-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--ows-target);
    padding: var(--ows-space-3) var(--ows-space-5);
    font-size: var(--ows-text-base);
    font-weight: var(--ows-weight-semibold);
    color: var(--ows-ink);
    background-color: var(--ows-field);
    border: 1.5px solid var(--ows-field-rule);
    border-radius: var(--ows-radius-field);
    cursor: pointer;
}

.btn-default:hover,
.return-button:hover,
.external-btn:hover {
    border-color: var(--ows-field-rule-strong);
    text-decoration: none;
}

.btn-danger {
    background-color: var(--ows-danger);
    color: var(--ows-ink);
}

/* Two actions stacked: the thing to do, then the way back. Several views put them next to each
   other with no separation at all, which on a phone means two full-width targets touching. */
.button + .return-button,
.button + .btn-default,
.btn + .return-button,
.return-button + .return-button {
    margin-top: var(--ows-space-3);
}

/* Anchors styled as buttons need their line box centred like a real button's. */
a.button,
a.return-button,
a.btn {
    text-decoration: none;
}

a.button:hover,
a.return-button:hover,
a.btn:hover {
    text-decoration: none;
}

.btn-link {
    width: auto;
    min-height: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--ows-accent);
    font-weight: var(--ows-weight-semibold);
}

/* ------------------------------------------------------------- checkbox ---
   "Remember me" and the terms acceptance. Built as a real input with a drawn box so the control
   stays keyboard reachable, which a span-only version is not. */

/* Aligned to the first line, not to the middle of the block. The consent sentence runs to three
   lines on a phone, and centring left the box floating beside the second one. */
.checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--ows-space-3);
}

/* Optical nudge: a 22px box next to a 14px line sits a shade high when both start at the top. */
.checkbox .check,
.ext-checkbox .check {
    margin-top: 1px;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: var(--ows-space-3);
    min-height: var(--ows-target);
    margin: 0;
    font-size: var(--ows-text-sm);
    font-weight: var(--ows-weight-normal);
    color: var(--ows-ink-soft);
    cursor: pointer;
}

.check,
input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex: none;
    margin: 0;
    accent-color: var(--ows-accent);
    cursor: pointer;
}

.checkbox-custom,
.checkbox-text {
    color: var(--ows-ink-soft);
}

/* The consent line beside the terms checkbox. The links inside it stay links: they open the
   documents being accepted, and they are the reason the sentence cannot live inside the <label>. */
.checkbox-text {
    flex: 1;
    font-size: var(--ows-text-sm);
    line-height: 1.45;
    color: var(--ows-ink-soft);
}

.checkbox-text a,
.terms-link,
.ext-terms {
    color: var(--ows-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ExternalLogin and the legal pages were written with their own prefixed vocabulary rather than
   the shared one. Mapping them here beats rewriting four views: same result, nothing to break. */
.ext-h2 { font-size: var(--ows-text-xl); font-weight: var(--ows-weight-bold); }
.ext-h4 { font-size: var(--ows-text-lg); font-weight: var(--ows-weight-bold); margin-bottom: var(--ows-space-4); }
.ext-label { display: block; margin-bottom: var(--ows-space-2); font-size: var(--ows-text-sm);
             font-weight: var(--ows-weight-semibold); color: var(--ows-ink-soft); }
.ext-info { color: var(--ows-ink-soft); font-size: var(--ows-text-sm); }
.ext-checkbox { display: flex; align-items: flex-start; gap: var(--ows-space-3); }
.ext-checkbox-text { flex: 1; font-size: var(--ows-text-sm); line-height: 1.45; color: var(--ows-ink-soft); }
.ext-text-danger { display: block; margin-top: var(--ows-space-2); font-size: var(--ows-text-sm);
                   font-weight: var(--ows-weight-semibold); color: var(--ows-danger); }

.ext-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--ows-target);
    padding: var(--ows-space-3) var(--ows-space-5);
    font-family: inherit;
    font-size: var(--ows-text-base);
    font-weight: var(--ows-weight-bold);
    color: var(--ows-on-accent);
    background-color: var(--ows-accent);
    border: 0;
    border-radius: var(--ows-radius-field);
    cursor: pointer;
}

/* The legal pages: their own wrapper names, same panel. */
.main-licence,
.content {
    color: var(--ows-ink-soft);
}

.backcolor,
.return-bkg {
    background: none;
}

/* --------------------------------------------------------------- links ---- */

.forgot-password {
    margin: var(--ows-space-3) 0 0;
}

.forgot-password-link,
.sign-up {
    display: inline-flex;
    align-items: center;
    min-height: var(--ows-target);
    font-size: var(--ows-text-sm);
    font-weight: var(--ows-weight-semibold);
    text-transform: none;
    /* was #FF006E, a pink that appears nowhere in the application: the most visible stitch in the
       whole product */
    color: var(--ows-accent);
}

.link-text {
    margin-top: var(--ows-space-4);
    font-size: var(--ows-text-sm);
    color: var(--ows-ink-muted);
    text-align: center;
}

.reset-password {
    margin-top: var(--ows-space-3);
}

/* -------------------------------------------------------------- messages --- */

.text-danger,
.field-validation-error,
.validation-summary-errors {
    display: block;
    margin-top: var(--ows-space-2);
    font-size: var(--ows-text-sm);
    font-weight: var(--ows-weight-semibold);
    color: var(--ows-danger);
}

.validation-summary-errors ul {
    margin: 0;
    padding-left: var(--ows-space-5);
}

.validation-summary-valid {
    display: none;
}

.text-info { color: var(--ows-ink-soft); }
.text-success { color: var(--ows-success); }

.alert {
    padding: var(--ows-space-4);
    margin-bottom: var(--ows-space-4);
    border-radius: var(--ows-radius-field);
    border: 1px solid transparent;
    font-size: var(--ows-text-sm);
}

.alert-danger {
    color: var(--ows-danger);
    background-color: var(--ows-danger-ground);
    border-color: var(--ows-danger);
}

.alert-warning {
    color: var(--ows-warning);
    background-color: var(--ows-warning-ground);
    border-color: var(--ows-warning);
}

.alert-info,
.alert-success {
    color: var(--ows-success);
    background-color: var(--ows-success-ground);
    border-color: var(--ows-success);
}

.text-lockedout {
    color: var(--ows-ink-soft);
}

/* ---------------------------------------------------------------- utils --- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Legal pages run long and are read, not filled in: they get a measure and a left-aligned column
   rather than the centred card the forms use. */
.terms {
    max-width: none;
    text-align: left;
}

.terms h1, .terms h2, .terms h3 { margin-top: var(--ows-space-5); }
.terms p, .terms li { color: var(--ows-ink-soft); }
.terms ul, .terms ol { padding-left: var(--ows-space-5); }

/* ----------------------------------------------------------- responsive --- */

@media (min-width: 480px) {
    .container { padding: 0 var(--ows-space-5); }
}

/* Landscape on a phone: the panel must scroll rather than centre, or its top is cut off with no
   way to reach it. */
/* Landscape, or a small screen with the keyboard up: stop centring altogether and let the page
   scroll from its top. */
@media (max-height: 620px) {
    .page { justify-content: flex-start; }
    .logo { margin-top: var(--ows-space-3); margin-bottom: var(--ows-space-3); }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}