/* Navigation rail.
 *
 * There is no top bar: the rail is the only chrome. It is pinned open above
 * 1200px and becomes a drawer over a dimmed page below that.
 *
 * Driven by a hidden checkbox, so no JavaScript is involved. The collapse
 * control lives inside the rail; a floating control appears over the content
 * when the rail is away. Both are <label for="nav">, as is the scrim, so
 * clicking outside the drawer closes it.
 *
 * The rail starts closed at every width, so the checkbox means one thing
 * throughout: checked is open. Above 1200px an open rail is pinned beside the
 * content; below, it floats over a dimmed page.
 *
 * Loaded after style.css. Bump CSS_VERSION in build.py when editing.
 */

body {
    margin: 0;
}

.navtoggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ---- controls ---- */

.iconbtn {
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9a9a9a;
    font-size: 17px;
    transition: background .15s, color .15s;
    user-select: none;
    flex: none;
}

.iconbtn:hover {
    background: #262626;
    color: #E0E0E0;
}

/* Panel-left glyph. Font Awesome 5 Free has no sidebar-toggle icon, so this is
   drawn here: a rounded rectangle with a divider. Masked rather than inlined so
   it picks up currentColor and follows the hover state. */
.iconbtn::before {
    content: "";
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Cline x1='9.5' y1='4' x2='9.5' y2='20'/%3E%3C/svg%3E") center / 20px no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Cline x1='9.5' y1='4' x2='9.5' y2='20'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* Floating control over the content, shown whenever the rail is not there. */
.opener {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 130;
    background: #1e1e1e;
    border: 1px solid #2c2c2c;
    display: flex;
}

/* ---- the rail ---- */

aside.rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    z-index: 110;
    background: #121212;
    border-right: 1px solid #2c2c2c;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    transform: translateX(-100%);
    transition: transform .22s ease;
}

.navtoggle:checked ~ .layout aside.rail {
    transform: none;
}

.railtop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* Sits inside .railinner's 8px gutter, so 10px here puts the wordmark on
       the same 18px line as the item text below. */
    padding: 6px 0 4px 10px;
    flex: none;
}

/* Set all caps. The lowercase glyphs in this face are small capitals at 87% of
   cap height, so mixed case leaves a 19% step between the leading O and the
   letter beside it. Unaccented, unlike the main site's OLÍMPICOS -- these pages
   are in English and it matches the domain. */
.brandmark {
    color: #E0E0E0;
    display: block;
    height: 22px;
    width: auto;
    flex: none;
}



/* Brand row, search and the switcher are all inside the scrolling area and all
   stick to the top of it as ONE block. Splitting them -- brand pinned outside,
   the rest sticky inside -- is what made them shift against each other while
   scrolling. One sticky element also avoids hard-coding each one's height as
   the next one's offset. */
.railhead {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #121212;
}

/* Fixed width so the links do not re-wrap while the width animates. */
.railinner {
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 8px;
}

.scrim {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
    cursor: pointer;
}

.navtoggle:checked ~ .scrim {
    opacity: 1;
    pointer-events: auto;
}

/* ---- rail contents ---- */

.subjbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 2px 8px 16px;
}

/* Left aligned rather than centred: with the icons all one width the labels
   start on a common vertical line, so the column reads as a list instead of
   eight separately centred blobs. */
.subjbar .subj {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    white-space: nowrap;
    font-size: 14px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #1e1e1e;
    color: #9a9a9a;
}

/* Solid weight, which the page already pays for: .railsearch::before pulls in
   fa-solid-900 for the magnifier, so these cost no extra request. Set on the
   pill rather than a wrapper element so the markup stays a bare span. */
.subjbar .subj::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    width: 14px;
    text-align: center;
    flex: none;
}

.subjbar .subj[data-subj="Physics"]::before { content: "\f5d2"; }
.subjbar .subj[data-subj="Mathematics"]::before { content: "\f698"; }
.subjbar .subj[data-subj="Informatics"]::before { content: "\f121"; }
.subjbar .subj[data-subj="Chemistry"]::before { content: "\f0c3"; }
.subjbar .subj[data-subj="Biology"]::before { content: "\f471"; }
.subjbar .subj[data-subj="Astronomy"]::before { content: "\f753"; }
.subjbar .subj[data-subj="Science"]::before { content: "\f610"; }
.subjbar .subj[data-subj="Linguistics"]::before { content: "\f1ab"; }
.subjbar .subj[data-subj="Economics"]::before { content: "\f201"; }
.subjbar .subj[data-subj="Geography"]::before { content: "\f57d"; }

.subjbar .subj:hover {
    background: #262626;
}

.subjbar .subj.on {
    background: #3f9fff;
    color: #00121f;
    font-weight: 600;
}

.subjbar .subj.soon {
    color: #4e4e4e;
    cursor: pointer;
}

.subjbar .subj.soon:hover {
    color: #9a9a9a;
}

/* The 16px below has to match .subjbar's padding-bottom: the field should sit
   the same distance from the buttons above it as from the first category
   heading below. .cath has line-height 1 and no padding-top, so its box top is
   the cap line and the two numbers can be compared directly. */
.railsearch {
    --field: 36px;
    position: relative;
    padding: 0 8px 16px;
}

/* The header used to add its own 10px on top of the search block's, so the gap
   below the field was double the one above. Spacing between groups now lives on
   the group.

   It has to hang off the sibling combinator rather than :first-of-type. Every
   block opens with the .subjname div, so the first .catgrp is never the first
   div among its siblings and :first-of-type -- which keys on element type, not
   class -- matched nothing at all: the first group kept its 10px. */
.catgrp + .catgrp {
    padding-top: 13px;
}

.railsearch::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f002";
    position: absolute;
    left: 21px;
    /* Centred on the field, not on .railsearch: the block carries the 16px gap
       below it as padding, so a 50% offset lands well under the input. Matching
       the field's own height and centring inside that keeps the glyph put no
       matter what the spacing below becomes. */
    top: 0;
    height: var(--field);
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #6a6a6a;
    pointer-events: none;
}

/* Native search fields bring their own inner shadow and cancel button, which
   look wrong on a dark rail, so the appearance is reset and rebuilt. */
.railsearch input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.2;
    box-sizing: border-box;
    height: var(--field);
    padding: 0 12px 0 32px;
    border-radius: 999px;
    background: #232323;
    color: #E0E0E0;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s;
}

.railsearch input::placeholder {
    color: #6a6a6a;
}

.railsearch input:hover {
    background: #282828;
}

.railsearch input:focus {
    outline: none;
    background: #121212;
    border-color: #3f9fff;
}

.railsearch input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 13px;
    width: 13px;
    background: #6a6a6a;
    cursor: pointer;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/11px no-repeat;
}

.catgrp .cath {
    padding: 0 10px 4px;
    font-size: 11.5px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6a6a6a;
}

/* Inset rounded rows rather than full-bleed with a left rule. */
aside.rail .exam {
    display: block;
    margin: 1px 0;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 15.5px;
    color: #E0E0E0;
}

aside.rail a.exam:hover {
    background: #262626;
    color: #E0E0E0;
}

aside.rail a.exam.on {
    background: #2a2a2a;
    color: #fff;
    font-weight: 600;
}

aside.rail .exam.soon {
    color: #4e4e4e;
    cursor: default;
}

aside.rail .exam.soon::after {
    content: " soon";
    font-size: 12px;
    color: #3d3d3d;
}

/* Every subject is in the DOM but hidden, so search can reach across them
   without an index. The subject name is redundant when a single block is
   showing, so it only appears while searching. */
.subjname {
    display: none;
    padding: 10px 10px 2px;
    font-size: 12.5px;
    font-weight: 700;
    color: #3f9fff;
    opacity: .8;
}

.raillist.searching .subjname {
    display: block;
}

.norail {
    padding: 10px 10px 12px;
    color: #6a6a6a;
    font-size: 14px;
}

/* ---- page header ---- */
header.col-12 {
    margin: 30px 0 26px;
}

/* Bootstrap's hr margins are inherited; set them so the rhythm between year
   blocks is deliberate rather than whatever 1rem happens to give. */
main.col-12 hr {
    margin: 20px 0;
}

/* The 6px bottom margin here was holding the tagline off the title; with that
   gone it just made the block sit 8px lower than it looked. */
header.col-12 h1 {
    font-size: 34px;
    font-weight: 600;
    margin: 0;
}

/* Two lines: where the files came from, then who made it. The source stays on
   its own line because a few olympiads carry a sentence of explanation there. */
footer.col-12 {
    margin: 26px 0 30px;
}

footer .source,
footer .credits {
    font-size: 15px;
    line-height: 1.6;
    color: #8a8a8a;
}

footer .credits {
    margin-top: 2px;
}

footer .credits span {
    color: #4e4e4e;
    padding: 0 3px;
}

/* ---- narrow: drawer ---- */
@media (max-width: 1199px) {
    .layout {
        display: block;
    }

    /* The floating control is the only way in, so it stays until the drawer
       is open. */
    .navtoggle:checked ~ .opener {
        display: none;
    }

    .content {
        padding-top: 10px;
    }
}

/* ---- wide: pinned ----
   A pinned rail cannot collapse with display:none, which is not animatable, so
   the width is animated instead and the content reflows alongside it. */
@media (min-width: 1200px) {
    .layout {
        display: flex;
        align-items: flex-start;
    }

    .content {
        flex: 1;
        min-width: 0;
    }

    /* Closed by default, same as narrow. The rail is pushed to zero width
       rather than display:none, which is not animatable. */
    aside.rail {
        position: sticky;
        top: 0;
        height: 100vh;
        width: 0;
        opacity: 0;
        border-right-color: transparent;
        transform: none;
        will-change: width;
        transition: width .26s cubic-bezier(.4, 0, .2, 1),
                    opacity .18s ease,
                    border-color .26s ease;
    }

    .navtoggle:checked ~ .layout aside.rail,
    html.nav-open .layout aside.rail {
        width: 260px;
        opacity: 1;
        border-right-color: #2c2c2c;
    }

    .railinner {
        width: 260px;
    }

    .scrim {
        display: none;
    }

    .navtoggle:checked ~ .opener,
    html.nav-open .opener {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    aside.rail,
    .scrim {
        transition: none !important;
    }
}

/* ---- problem results ----
   The olympiad list answers "where do I go"; this answers "where is that
   problem". Loaded on the first keystroke, never on page load. */
.railprobs {
    display: none;
    border-top: 1px solid #2c2c2c;
    margin-top: 10px;
    padding-top: 4px;
}

.raillist.searching ~ .railprobs {
    display: block;
}

.railprobs .ph {
    padding: 10px 10px 3px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6a6a6a;
}

.railprobs a {
    display: block;
    margin: 1px 0;
    padding: 6px 10px;
    border-radius: 8px;
    color: #E0E0E0;
}

.railprobs a:hover {
    background: #262626;
}

.railprobs .pt {
    display: block;
    font-size: 15px;
    line-height: 1.3;
}

.railprobs .pm {
    display: block;
    font-size: 12.5px;
    color: #6a6a6a;
    margin-top: 1px;
}

.railprobs .pn {
    padding: 8px 10px 12px;
    color: #6a6a6a;
    font-size: 13.5px;
}

/* ---- scrollbars ----
 * style.css sets a global 10px bar with a #3c3c3c track, lighter than the rail
 * it sits on. Styling ::-webkit-scrollbar at all also opts out of the overlay
 * scrollbars macOS would otherwise use, so the bar permanently occupies width
 * and the content shifts when it appears.
 *
 * The gutter is kept a constant width so nothing ever moves; only the thumb's
 * colour changes, so it fades in when you are actually using the area.
 */
.railinner {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.railinner:hover,
.railinner:focus-within {
    scrollbar-color: #4a4a4a transparent;
}

.railinner::-webkit-scrollbar {
    width: 8px;
}

.railinner::-webkit-scrollbar-track {
    background: transparent;
}

/* The transparent border plus background-clip leaves the thumb inset from the
   edge and rounded, rather than a full-width block. */
.railinner::-webkit-scrollbar-thumb {
    background: transparent;
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
    transition: background-color .18s ease;
}

.railinner:hover::-webkit-scrollbar-thumb,
.railinner:focus-within::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    background-clip: content-box;
}

.railinner::-webkit-scrollbar-thumb:hover {
    background: #6a6a6a;
    background-clip: content-box;
}

/* The page's own bar, toned down from the light track style.css gives it. */
body::-webkit-scrollbar {
    width: 10px;
}

body::-webkit-scrollbar-track {
    background: transparent;
}

body::-webkit-scrollbar-thumb {
    background: #333;
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}

body::-webkit-scrollbar-thumb:hover {
    background: #4a4a4a;
    background-clip: content-box;
}

/* ---- year cards (variant K) + flag chips (F5B) ----
 *
 * Desktop only. Below 992px the year panel is a full-width block above its
 * problems and the card framing would just add nesting to a narrow column, so
 * mobile keeps exactly what style.css already gives it.
 *
 * style.css lives only on the server and predates this repo, so these are
 * written here rather than edited there. That means overriding a few of its
 * declarations, which is why the specificity looks heavier than it needs to.
 */
@media (min-width: 992px) {
    /* The card edge separates the years now, so the rule between them is one
       divider too many. */
    main section > hr {
        display: none;
    }

    main article.row {
        background: #181818;
        border-radius: 12px;
        margin-bottom: 22px;
        padding: 10px 0;
    }

    /* One step lighter than the card it sits in, so the year reads as inset
       rather than as another slab beside the problems. */
    main article.row .left-col {
        background-color: #232323;
        position: relative;
        overflow: hidden;
    }

    /* Above the flag, and legible even where a pale one sits behind them. */
    main article.row .left-col > p {
        position: relative;
        z-index: 1;
        text-shadow: 0 1px 6px rgba(0, 0, 0, .75);
    }

    /* Peeking out of the bottom-right corner, tilted.
       width:auto is deliberate: flags keep their natural aspect ratio, and
       Switzerland is square.
       clip-path is load-bearing rather than decorative -- at fractional pixel
       widths the SVG leaves a pale antialiased fringe along its edge, which is
       obvious against the dark panel. Insetting by a pixel eats the fringe,
       and the matching radius keeps the corners the border-radius rounded. */
    main article.row .left-col img.flag {
        position: absolute;
        right: -18px;
        bottom: -12px;
        /* Fixed, deliberately. Capping it against the panel height was tried
           and reverted: card heights vary with problem count, so a percentage
           made the same page show flags at several different sizes -- obvious
           on IJSO, where years have very different numbers of problems. One
           size everywhere reads as consistent, even where it fills a short
           card like a banner. */
        height: 100px;
        width: auto;
        border-radius: 10px;
        clip-path: inset(1px round 10px);
        transform: rotate(-8deg);
        opacity: .45;
        box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
    }
}

/* Decorative, and the panel is short here -- a tilted flag behind the year
   would be noise rather than charm. */
@media (max-width: 991px) {
    img.flag {
        display: none;
    }
}

/* A year whose problems all live in one PDF renders as a single entry rather
   than the same two links repeated once per problem. The titles stay -- they
   are the content, and what search and Ctrl+F work on -- so the block is full
   width and reads as a sentence rather than a column. */
.main-col.whole {
    text-align: center;
}

.main-col.whole .name {
    height: auto;
    padding: 0 12px;
}

.main-col.whole .name p {
    display: block;
    line-height: 1.45;
}