/* ------------------------------------------------------------------ */
/* FreeSO Australia                                                     */
/*                                                                      */
/* The original stylesheet was written for one fixed width page, the    */
/* registration form: #container had min-width 980px, #form floated     */
/* right at 400px, and the buttons floated too. Every other page reused */
/* those ids, so their content overlapped and none of it fitted a       */
/* phone. This replaces the layout with a flow based, responsive one    */
/* while keeping the original palette, type and button shapes.          */
/* ------------------------------------------------------------------ */

@font-face {
    font-family: 'The Sims Sans';
    src: url('fonts/hinted-TheSimsSansSC.eot');
    src: url('fonts/hinted-TheSimsSansSCd41d.eot?#iefix') format('embedded-opentype'), url('fonts/hinted-TheSimsSansSC.woff2') format('woff2'), url('fonts/hinted-TheSimsSansSC.woff') format('woff'), url('fonts/hinted-TheSimsSansSC.ttf') format('truetype'), url('fonts/hinted-TheSimsSansSC.svg#TheSimsSansSC') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Munged';
    src: url('fonts/hinted-Munged-embOpitJmj.eot');
    src: url('fonts/hinted-Munged-embOpitJmjd41d.eot?#iefix') format('embedded-opentype'), url('fonts/hinted-Munged-embOpitJmj.woff2') format('woff2'), url('fonts/hinted-Munged-embOpitJmj.woff') format('woff'), url('fonts/hinted-Munged-embOpitJmj.ttf') format('truetype'), url('fonts/hinted-Munged-embOpitJmj.svg#Munged-embOpitJmj') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'The Sims Sans';
    src: url('fonts/hinted-TheSimsSansSC-Bold.eot');
    src: url('fonts/hinted-TheSimsSansSC-Boldd41d.eot?#iefix') format('embedded-opentype'), url('fonts/hinted-TheSimsSansSC-Bold.woff2') format('woff2'), url('fonts/hinted-TheSimsSansSC-Bold.woff') format('woff'), url('fonts/hinted-TheSimsSansSC-Bold.ttf') format('truetype'), url('fonts/hinted-TheSimsSansSC-Bold.svg#TheSimsSansSC-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Munged';
    src: url('fonts/hinted-Munged-otVXWjH6W8.eot');
    src: url('fonts/hinted-Munged-otVXWjH6W8d41d.eot?#iefix') format('embedded-opentype'), url('fonts/hinted-Munged-otVXWjH6W8.woff2') format('woff2'), url('fonts/hinted-Munged-otVXWjH6W8.woff') format('woff'), url('fonts/hinted-Munged-otVXWjH6W8.ttf') format('truetype'), url('fonts/hinted-Munged-otVXWjH6W8.svg#Munged-otVXWjH6W8') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --blue:   #2D8AC4;
    --green:  #43A900;
    --orange: #CF5029;
    --yellow: #D9A300;
    --ink:    #595959;
    --shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
    --radius: 6px;
}

@keyframes fade   { from { opacity: 0 } to { opacity: 1 } }
@keyframes appear { from { opacity: 0; transform: translateX(40px) } to { opacity: 1; transform: none } }

html { box-sizing: border-box }
*, *::before, *::after { box-sizing: inherit }

body {
    margin: 0;
    min-height: 100%;
    background: linear-gradient(to bottom, #fff 0%, #eee 100%) fixed;
    font-family: 'The Sims Sans', 'Trebuchet MS', sans-serif;
    color: var(--ink);
    /* 17px is the original size, but never below 16 on an input or iOS zooms
       the whole page on focus. */
    font-size: 17px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

/* --- Layout ------------------------------------------------------- */

.page {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.logo {
    display: block;
    animation: fade 2s both;
    /* The logo is the masthead, not part of the page's first section. A little
       extra room under it keeps the page title reading as a heading for the
       content rather than a caption for the logo. */
    margin-bottom: 8px;
}

.logo img {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
}

h1 {
    font-weight: bold;
    font-size: clamp(22px, 5vw, 28px);
    color: var(--ink);
    margin: 0;
}

h2 {
    font-weight: bold;
    font-size: clamp(18px, 4vw, 22px);
    color: var(--ink);
    margin: 0 0 12px;
}

/* A heading belongs to what comes after it. .page is a flex column with one
   uniform gap, which leaves a heading exactly as far from the block it
   introduces as from the one before it - so it reads as the tail of the
   previous section rather than the start of the next. Push it down and pull the
   following block up. Only direct children: headings inside a .card are spaced
   by the card itself. */
.page > h1,
.page > h2 {
    margin-top: 22px;
    margin-bottom: -8px;
}

.page > .logo + h1,
.page > .logo + h2 {
    margin-top: 0;
}

/* The page gap owns the vertical rhythm. A paragraph's own 8px margins add to
   it, which both cancelled the negative margin above and made runs of
   paragraphs drift apart unevenly - 36px between two, 28px to the next block. */
.page > p {
    margin: 0;
}

/* A block and the caption that introduces it, held closer together than the
   page rhythm so the pairing is unambiguous. Use where a line of text explains
   the control directly beneath it. */
.group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

p { margin: 8px 0 }

a { color: #3974B8 }

/* A centred block of body copy. Reads badly much wider than this. */
.prose {
    max-width: 62ch;
    margin: 0 auto;
}

.prose--left { text-align: left }

.card {
    width: 100%;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    text-align: left;
}

/* Auto fitting columns: three across on a desktop, one on a phone, with no
   breakpoint needed. */
.cards {
    width: 100%;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
}

/* --- Buttons ------------------------------------------------------ */

/* Real links and buttons rather than divs with onclick, so they can be
   focused, opened in a new tab and used with a screen reader. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 48px tall: a comfortable touch target. */
    min-height: 48px;
    min-width: 200px;
    padding: 12px 24px;
    background-color: var(--blue);
    color: #fff;
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-family: inherit;
    font-size: inherit;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}

.btn:hover   { filter: brightness(1.08) }
.btn:active  { transform: translateY(1px) }
.btn:focus-visible {
    outline: 3px solid #1B4F72;
    outline-offset: 2px;
}

.btn--green  { background-color: var(--green) }
.btn--orange { background-color: var(--orange) }
.btn--yellow { background-color: var(--yellow) }
.btn--small  { min-width: 0; min-height: 40px; padding: 8px 18px; font-size: 15px }

/* A column of buttons that becomes a row once there is room. */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    width: 100%;
}

.btn-row .btn { flex: 0 1 auto }

@media (max-width: 480px) {
    .btn { width: 100% }
    .btn--small { width: auto }
}

/* --- Forms -------------------------------------------------------- */

.field { margin-bottom: 16px }

.field label {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
}

.field input,
.field textarea,
.field select {
    font-family: inherit;
    font-size: 16px;
    color: inherit;
    width: 100%;
    min-height: 48px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
}

.field input:focus-visible,
.field textarea:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 1px;
}

/* Only the registration inputs slide in; reusing it everywhere was noisy. */
.field--animated input { animation: appear 500ms ease-out both }

/* The slide starts 40px to the right, and fill-mode both holds that start
   position through the staggered delay. On a narrow screen those 40px hang
   off the edge and give the whole page a horizontal scrollbar for the first
   second, so fade instead. */
@media (max-width: 620px) {
    .field--animated input { animation-name: fade }
}

.field input.mismatch { background-color: #FFCFBF }

/* --- Name picker -------------------------------------------------- */

/* An explicit listbox rather than <datalist>. Chromium suppresses the native
   popup when autocomplete="off" is also present, and even without that the
   popup cannot be styled, cannot show a secondary label reliably, and behaves
   differently in every browser. This is predictable everywhere. */
.combo { position: relative }

.combo__list {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    text-align: left;
}

.combo__list[hidden] { display: none }

.combo__option {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    /* Comfortably tappable. */
    min-height: 44px;
    padding: 8px 12px;
    cursor: pointer;
}

.combo__option[aria-selected="true"],
.combo__option:hover {
    background: var(--blue);
    color: #fff;
}

.combo__option .id { opacity: .6; font-size: 14px }
.combo__option[aria-selected="true"] .id { opacity: .85 }

.combo__empty {
    padding: 12px;
    color: var(--ink);
    opacity: .7;
    font-size: 15px;
}

/* --- Messages ----------------------------------------------------- */

.pill {
    display: inline-block;
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin: 4px;
    font-weight: bold;
}

.pill--ok    { background-color: var(--green) }
.pill--bad   { background-color: var(--orange) }
.pill--info  { background-color: var(--blue) }

/* Retained under their original names so any page still using them works. */
.online, .offline, .status {
    display: inline-block;
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin: 4px;
}
.online  { background-color: var(--green) }
.offline { background-color: var(--orange) }
.status  { background-color: var(--blue) }

.fsoError {
    color: var(--orange);
    min-height: 20px;
    text-align: center;
    font-weight: bold;
}

.fsoError--ok { color: var(--green) }

/* --- Registration split ------------------------------------------- */

/* Was: #render floated left at a fixed 555px with #form floated right at
   400px, which forced a 980px minimum. Now a flex row that folds. */
.split {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    width: 100%;
    align-items: flex-start;
    justify-content: center;
}

.split__art {
    flex: 1 1 480px;
    max-width: 555px;
    aspect-ratio: 555 / 465;
    /* Relative to this stylesheet at the document root, so it resolves the
       same from /register/ as it would from /. */
    background: url(img/render2.png) no-repeat center / contain;
}

.split__form {
    flex: 1 1 340px;
    max-width: 420px;
    text-align: center;
}

/* Below this the artwork is decorative padding on a small screen, and the
   registration form should own the viewport. */
@media (max-width: 780px) {
    .split__art { display: none }
    .split__form { max-width: 480px }
}

/* --- Footer ------------------------------------------------------- */

.site-footer {
    width: 100%;
    max-width: 62ch;
    margin: 24px auto 0;
    padding-top: 16px;
    border-top: 1px solid #ddd;
    font-size: 14px;
    color: rgba(0, 0, 0, .45);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}