/* Set up screen */
/* #setup, like every other wrapper, takes its width from the shared column */
.picker {
    margin: 0 auto 6px;
}
.picker label {
    margin: 0 3px 10px;
}
.style-hint {
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.8;
    margin: 6px auto 0;
    max-width: 420px;
}

/* The stage bar - which part of the session you are in, and the rest clock */
#sessionHolder {
    display: none;
}
#stageBar {
    margin: 16px auto 12px;
    padding: 14px 12px;
    box-sizing: border-box;
}
#stageBar h2 {
    margin: 0;
    font-size: 24px;
}
#restClock {
    display: none;
    font-size: 60px;
    margin: 6px 0 0;
}
#stageHint {
    margin: 6px 0 0;
    font-size: 15px;
    opacity: 0.8;
}

/* Climbs to tick. The tile itself - hold colours, ticked state, dark mode - is in
   common/style.css; this is how big they are here. */
#climbs {
    margin: 0 auto;
}
.route {
    position: relative;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    min-height: 64px;
    margin: 0 0 8px;
    padding: 10px 40px 10px 12px;
    border-left: 10px solid var(--hold);
    border-radius: 8px;
    background: #F9F9F9;
    color: #222;
    font-family: 'Hind', sans-serif;
    font-size: 15px;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
}
/* With the Gilford wall switched off there is no hold colour to show, so the
   swatch down the side goes and a ticked climb uses the app's own blue */
.route.plain {
    border-left-color: transparent;
    padding-left: 22px;
}
.route.plain .route-grade {
    font-size: 24px;
}
.route.plain.ticked {
    background: #0b6ad6;
    color: #ffffff;
    border-left-color: #00397f;
    box-shadow: none;
}
.route-grade {
    font-size: 22px;
    line-height: 1.2;
}
.route .tick {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 24px;
    opacity: 0;
    margin: 0;
}
/* Buttons */
#choice {
    display: none;
}

/* Skipping the rest is a quiet, deliberate thing to do, so it is a plain link
   rather than a button - but it still has to be readable at arm's length on a
   wall, hence the solid blues rather than a faded grey. */
#skipRest {
    display: none;
    /* shrink wrapped and centred, so it sits on its own line clear of the
       DISCARD button without turning the whole width into a hit area */
    width: fit-content;
    margin: 20px auto 18px;
    padding: 8px 14px;
    font-size: 17px;
    font-weight: bold;
    color: #0053ba;
    text-decoration: underline;
}
#skipRest:hover, #skipRest:focus {
    color: #00306e;
}
.dark #skipRest {
    color: #8ec5ff;
}
.dark #skipRest:hover, .dark #skipRest:focus {
    color: #c5e0ff;
}
#choice button {
    display: block;
    width: 100%;
    margin: 12px auto 0;
}
/* The quiet one of the two choices: a pale tint with the blue as ink rather than
   a fill, so FINISH SESSION beside it is plainly the louder of the two. The
   label sits at 6.2:1 on it.

   The border is doing real work - #e8f0fe against a white page is 1.15:1, so
   without it the button has no edge at all. */
#anotherSet {
    background: #e8f0fe;
    color: #0053ba;
    border: 1px solid #1a73e8;
}
/* the shared button:hover fills with #0053ba, which would turn this one solid -
   a tint one step deeper keeps it the quiet option while still answering a tap */
#anotherSet:hover, #anotherSet:focus {
    background: #d2e3fc;
    color: #0053ba;
}
/* the shared focus ring is white, which is invisible on a pale fill */
#anotherSet:focus {
    outline: 2px solid #1a73e8;
    outline-offset: 1px;
}

/* Dark mode wants the same idea the other way up. The light tint on a #111 page
   comes out at 16:1, which would make the quiet button the brightest thing on
   the screen - louder than the primary it is meant to sit behind. */
/* White rather than the pale blue ink the light version mirrors: on this fill it
   reads at 14.5:1 against the blue's 8:1, and the button is still the quiet one
   because the fill barely lifts off the page - not because its label is dim. */
.dark #anotherSet {
    background: #16294a;
    color: #FFFFFF;
}
.dark #anotherSet:hover, .dark #anotherSet:focus {
    background: #203a66;
    color: #FFFFFF;
}
#discard {
    display: none;
    margin-bottom: 40px;
}

/* About panel */
/* The about panel sits on near black, so everything in it is white at full
   strength - nothing dimmed by opacity, since it gets read at arm's length */
/* common/style.css gives every .icon-ok a 40px right margin, for the spacing of
   the delete confirm in the log. The tick on the settings toggle wants none of
   it - the space in the markup is gap enough before the label. */
.overlay .switch-label .icon-ok {
    margin-right: 0;
}
/* Dark mode */
.dark h2, .dark .style-hint {
    color: #FFF;
}
.dark #stageBar {
    background: #262626;
    color: #FFF;
}
.dark #restClock {
    color: #FFF;
}
/* The setting groups these panels are built from are in common/style.css */

@media (max-width: 380px) {
    #restClock {
        font-size: 48px;
    }
    #stageBar h2 {
        font-size: 20px;
    }
    .route {
        font-size: 14px;
        min-height: 58px;
    }
    .route-grade {
        font-size: 20px;
    }
}