/*
 * The whole visual vocabulary of this origin's three server-rendered pages —
 * login.html, error/error.html, error/500.html — and nothing else. It replaces
 * five Bootstrap files totalling 705,848 bytes (bootstrap.min.css,
 * bootstrap-icons.min.css, bootstrap.bundle.min.js and the icon font in both
 * .woff and .woff2), which those three pages between them used for one form,
 * one alert and one collapse toggle. The collapse toggle went with the 500
 * page's technical panel and the alerts stopped being dismissible, so what was
 * left was a grid and a card — a few dozen lines, written here.
 *
 * No @import and no remote font. The CSP served at server level in
 * frontend/nginx.conf is
 *     default-src 'self'; ... style-src 'self' 'unsafe-inline'; font-src 'self'
 * so a Google Fonts <link> would be blocked and the page would silently fall
 * back to a browser default. The font stack below is therefore entirely fonts
 * the device already has, ending in the three Korean faces that ship with
 * macOS/iOS, Windows and Android respectively — the brand line is Hangul, and a
 * stack with no CJK fallback hands it to a font that has no such glyphs.
 *
 * The colours are the village's own, from
 * mobile_flutter_project/goryeo-village-updates/docs/VISUAL_REFERENCE.md §7,
 * quoted by name below. That document is the authenticity bar and it reserves
 * Dancheong Red #A32638 and Dancheong Blue #1F4E79 for buildings this village
 * does not have; neither appears here, and neither does Bootstrap's #dc3545,
 * which is what the error pages' icon used to be. Every one of these pages is
 * typography only — no imagery — so the palette is the only place the game
 * shows through, and none of the bar's five automatic-fail pitfalls is
 * reachable from a stylesheet.
 */

:root {
    /* VISUAL_REFERENCE.md §7, by its own names. */
    --hanji-cream: #F0E6CB;
    --hemp-beige: #E4D9BE;
    --onggi-brown: #3E2A1E;
    --timber-grey-brown: #6E6459;
    --granite-grey: #A6A296;
    --giwa-charcoal: #4B4E52;
    --persimmon-rust: #8B4A2B;
    --hwangto-ochre: #B98A4E;
    --pine-green: #3B5D45;
    --indigo: #33475B;
}

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

html {
    /* Not `font-size: 16px`. A fixed root size overrides the browser's own text
       size for anyone who has raised it, and this is a page people meet before
       they can reach any setting of ours. */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    /* Every face here is already on the device — see the CSP note above. The
       three CJK entries cover macOS/iOS, Windows and Android, and they sit
       AFTER the Latin faces so Latin text is unaffected by them. */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--onggi-brown);
    background-color: var(--hemp-beige);
}

/* The one layout both page shapes need: a card centred in the viewport, with an
   optional footnote stacked under it, and room to breathe on a phone. A COLUMN
   flex container rather than a row, which is what lets the error pages put that
   footnote outside the card without a wrapper element.

   `min-height: 100svh` after `100vh`, not instead of it — on mobile Safari a
   100vh box is taller than the visible viewport while the URL bar is showing,
   which pushes the submit button under it; a browser that does not know `svh`
   ignores the second declaration and keeps the first. */
.page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 1.5rem 1rem;
}

.card {
    width: 100%;
    max-width: 27rem;
    background-color: var(--hanji-cream);
    border: 1px solid var(--granite-grey);
    border-radius: 4px;
    /* Low and warm rather than Bootstrap's neutral drop shadow — the card is
       meant to read as paper on cloth. */
    box-shadow: 0 2px 10px rgba(62, 42, 30, 0.18);
}

/* The error pages carry prose rather than a form, so they get a wider measure —
   600px was the width their own <style> blocks set before this file existed. */
.card--wide {
    max-width: 37.5rem;
    text-align: center;
}

.card__header {
    padding: 1.75rem 1.75rem 1.25rem;
    border-bottom: 1px solid var(--granite-grey);
    text-align: center;
}

.card__body {
    padding: 1.5rem 1.75rem 1.75rem;
}

.brand {
    margin: 0 0 0.4rem;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* The brand line above a message rather than above a form: same words, the
   weight of a caption. */
.brand--small {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--timber-grey-brown);
}

.tagline {
    margin: 0;
    color: var(--timber-grey-brown);
}

/* ---- the three login states ------------------------------------------- *
 * Distinguished by an edge colour AND by their words, never by colour alone
 * (WCAG 1.4.1). The text stays the body's near-black on a faint tint in every
 * case, so contrast does not depend on which state rendered: the ochre used for
 * the lockout edge is about 2.2:1 on cream and would be unreadable as text.
 */
.notice {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--granite-grey);
    border-left-width: 5px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.5);
}

.notice--error {
    border-left-color: var(--persimmon-rust);
}

.notice--locked {
    border-left-color: var(--hwangto-ochre);
}

.notice--signed-out {
    border-left-color: var(--pine-green);
}

/* The fourth and fifth states, added for signup + admin approval: a fresh
   signup told to wait (registered=true) and a not-yet-approved account told
   why it cannot sign in yet (pending=true). Same rule as the three above —
   colour reinforces, the sentence carries the meaning. */
.notice--pending {
    border-left-color: var(--indigo);
}

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

.field {
    margin-bottom: 1.1rem;
}

.field__label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.field__input {
    display: block;
    width: 100%;
    padding: 0.6rem 0.7rem;
    /* `inherit`, not a size: an input that does not inherit the font is the
       usual reason a form looks bolted on, and under 16px mobile Safari zooms
       the whole page on focus. */
    font: inherit;
    color: var(--onggi-brown);
    background-color: #FFFFFF;
    border: 1px solid var(--timber-grey-brown);
    border-radius: 3px;
}

.field__input:focus-visible {
    outline: 2px solid var(--indigo);
    outline-offset: 1px;
}

.button {
    display: block;
    width: 100%;
    padding: 0.7rem 1rem;
    font: inherit;
    font-weight: 700;
    color: var(--hanji-cream);
    background-color: var(--giwa-charcoal);
    border: 1px solid var(--giwa-charcoal);
    border-radius: 3px;
    cursor: pointer;
}

.button:hover {
    background-color: var(--onggi-brown);
    border-color: var(--onggi-brown);
}

.button:focus-visible {
    outline: 2px solid var(--indigo);
    outline-offset: 2px;
}

/* The error pages' one way out is an <a>, and it has to look like the login
   button without being one — hence the shared paint and an inline-block width. */
.button--link {
    display: inline-block;
    width: auto;
    padding: 0.6rem 1.4rem;
    text-decoration: none;
}

/* Inline row actions on the pending-approvals table — same paint family as
   .button, sized to sit two-in-a-row instead of filling the card. */
.button--row {
    display: inline-block;
    width: auto;
    padding: 0.4rem 0.9rem;
    font-size: 0.9rem;
}

.button--danger {
    background-color: var(--persimmon-rust);
    border-color: var(--persimmon-rust);
}

.button--danger:hover {
    background-color: var(--onggi-brown);
    border-color: var(--onggi-brown);
}

/* A plain in-copy link (login <-> signup), not a button — underlined so it
   reads as a link with no CSS at all, coloured from the same palette. */
.link {
    color: var(--indigo);
}

/* ---- the admin approval table ------------------------------------------ */

.table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.table th,
.table td {
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid var(--granite-grey);
    text-align: left;
    vertical-align: middle;
}

.table th {
    font-weight: 600;
    color: var(--timber-grey-brown);
}

/* ---- the error pages --------------------------------------------------- */

.status-code {
    margin: 0 0 0.25rem;
    font-size: 3.25rem;
    font-weight: 300;
    line-height: 1.1;
    color: var(--timber-grey-brown);
}

.error-title {
    margin: 0 0 0.75rem;
    font-size: 1.5rem;
}

.error-message {
    margin: 0 0 1.5rem;
    color: var(--timber-grey-brown);
}

/* Sits OUTSIDE the card, under it — guidance about the page rather than part of
   the message on it. The max-width matches .card--wide so the two edges line up
   as one column. */
.footnote {
    width: 100%;
    max-width: 37.5rem;
    margin: 1.5rem 0 0;
    font-size: 0.875rem;
    text-align: center;
    color: var(--timber-grey-brown);
}