/*
    Theme: la piste.

    A layer over tokens.css and identity.css, loaded after both. It redefines the palette and the
    background; nothing structural moves, and removing the <link> returns the pages to the neutral
    socle.

    Same photograph as the native sign-in screen, cropped the same way, so crossing from the app
    into this WebView does not read as changing product. That is the whole point of the exercise:
    the seam must not show.
*/

@font-face {
    font-family: "Chivo";
    src: url("../fonts/Chivo-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --ows-ground: #14100F;
    --ows-ground-deep: #0D0A0A;

    /* No sheet: the forms stand on the track. Kept as a token so anything still asking for a
       panel gets nothing rather than a stray colour. */
    --ows-panel: transparent;
    --ows-panel-rule: transparent;

    /* Fields are the exception. Text being typed has to stay readable over whatever part of the
       photograph sits behind it, so they keep a solid ground — the mistake the old Identity made
       with rgba(255,255,255,.6) directly on a picture. */
    --ows-field: rgba(20, 16, 15, 0.78);
    --ows-field-rule: rgba(244, 239, 232, 0.62);
    --ows-field-rule-strong: #F4EFE8;

    --ows-ink: #F7F3ED;
    --ows-ink-soft: #EADFD8;
    --ows-ink-muted: #D2C4BC;

    /* Lane paint carries the primary action. */
    --ows-accent: #F4EFE8;
    --ows-accent-pressed: #E0D5CD;
    --ows-on-accent: #8E2F20;

    --ows-link: #F0A07A;

    /* Amber, not red: red cannot signal an error on a red track. It is also the colour of the
       warning flag. */
    --ows-danger: #FFD166;
    --ows-danger-ground: rgba(255, 209, 102, 0.16);
    --ows-warning: #FFD166;
    --ows-warning-ground: rgba(255, 209, 102, 0.16);
    --ows-success: #F4EFE8;
    --ows-success-ground: rgba(244, 239, 232, 0.14);

    --ows-focus: #7FD8FF;

    --ows-radius-field: 10px;
    --ows-radius-panel: 0;
}

/* ------------------------------------------------------------- the track --- */

body::before {
    background-image: url("../images/track_lanes.jpg");
    background-size: cover;
    background-position: center center;
}

/* One veil, deeper where type sits and deeper still behind the controls. The photograph is much
   lighter than the flat tartan of the mock, so cream needs more help here than the mock suggested.
   Set on the token, so the rule in identity.css never has to know which theme is loaded. */
:root {
    --ows-veil: linear-gradient(to bottom,
        rgba(20, 16, 15, 0.76) 0%,
        rgba(20, 16, 15, 0.46) 30%,
        rgba(20, 16, 15, 0.58) 52%,
        rgba(20, 16, 15, 0.78) 74%,
        rgba(20, 16, 15, 0.86) 100%);

    /* No sheet, so no shadow under one. */
    --ows-shadow-panel: none;
}

/* ------------------------------------------------------------ the brand --- */

/* Sized to the file it is drawn from (172 x 52) rather than blown up past it: at 250px the mark
   was both soft and the single largest thing above the fold, and the register form — the tallest
   of the twenty-four pages — could not be finished without scrolling. Two thirds of the height
   saved here comes from the margins, not the image. */
.logo {
    width: 170px;
    max-width: 52%;
    margin: var(--ows-space-4) auto var(--ows-space-2);
    filter: brightness(0) invert(1);
}

/* ------------------------------------------------------- lane and headline --- */

/* The lane number and the headline are left-aligned while the mark stays centred: that contrast
   is what holds the composition together, and it is what the direction was built on. */
.lane-tag {
    display: block;
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    color: var(--ows-ink-soft);
    text-align: left;
    margin: var(--ows-space-3) 0 var(--ows-space-2);
}

h1, h2,
.login-form h4, .register-form h4, .reset-form h4,
.confirmation h1, .confirmation h2 {
    font-family: "Chivo", "Open Sans", system-ui, sans-serif;
    font-weight: 900;
    font-size: 2.35rem;
    letter-spacing: -0.035em;
    line-height: 0.94;
    text-transform: uppercase;
    text-align: left;
    color: var(--ows-ink);
    margin-bottom: var(--ows-space-4);
}

/* ------------------------------------------------- forms on the track ------ */

/* The panel is gone: no ground, no border, no shadow, no rounding. What is left is spacing. */
.page form,
.login-form,
.register-form,
.reset-form,
.confirmation,
.terms,
.panel-sheet {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 var(--ows-space-5);
}

label,
.label {
    color: var(--ows-ink-soft);
}

/* The one thing that is filled, because it is the one thing you came to do. */
.button, .btn, button[type="submit"] {
    font-weight: 900;
    letter-spacing: 0.01em;
}

/* Everything secondary is drawn in lane paint and filled with almost nothing, so the track stays
   visible through it. */
.btn-default, .return-button, .external-btn {
    background-color: rgba(244, 239, 232, 0.10);
    border-color: rgba(244, 239, 232, 0.62);
    color: var(--ows-ink);
}

.btn-default:hover, .return-button:hover, .external-btn:hover {
    background-color: rgba(244, 239, 232, 0.18);
    border-color: #F4EFE8;
}

a,
.forgot-password-link,
.sign-up,
.link-text a,
.checkbox-text a,
.terms-link,
.ext-terms,
.signup b {
    color: var(--ows-link);
}

/* Long legal pages are read, not filled in: they get a ground back, or the text would sit on the
   photograph for several screens. */
.terms,
.main-licence {
    background-color: rgba(20, 16, 15, 0.86);
    border-radius: var(--ows-radius-field);
    padding: var(--ows-space-5);
}

.terms h1, .terms h2, .terms h3 {
    font-size: 1.35rem;
    text-transform: none;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* ------------------------------------------------------ short screens ------ */

/* identity.css already carries a `@media (max-height: 620px)` block that trims the logo margins,
   and it has never once applied: a media query adds no specificity, and this file is linked after
   identity.css, so the plain `.logo` rule above wins inside the query as well as outside it. The
   override has to live here to have any effect. Landscape and the on-screen keyboard are exactly
   the cases where the room is not there. */
@media (max-height: 620px) {
    .logo {
        width: 132px;
        margin-top: var(--ows-space-2);
        margin-bottom: var(--ows-space-1);
    }

    .lane-tag { margin-top: var(--ows-space-2); }
}