/*
 * ÂME Bistro & Coffee — guest Wi-Fi portal.
 *
 * This file plus logo.svg and the BRAND_* constants in src/Config.php are the
 * entire visual identity. Rebranding is those three things.
 *
 * Two rules that are not style choices:
 *
 *  1. NOTHING may be loaded from outside this server. No CDN, no Google Fonts,
 *     no remote images. A guest reaches this page before they have internet, so
 *     an external asset fails for exactly the people who need the page to work.
 *     Self-hosted files under /assets/ are fine — the portal is in the router's
 *     walled garden.
 *
 *  2. It must work with JavaScript disabled. Captive-portal browsers are the
 *     least capable browsers our guests own, and this is the one page they
 *     cannot route around.
 */

/* ── typefaces ────────────────────────────────────────────────────────────
 *
 * Self-hosted from assets/fonts/. Never link Google Fonts or any CDN: a guest
 * reaches this page before they have internet, so a remote font fails for
 * exactly the people who need the page to work. Files served from here are fine
 * — the portal is inside the router's walled garden.
 */

/* Body and labels. */
@font-face {
    font-family: "Old Standard TT";
    src: url("fonts/OldStandardTT-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Headings. Drop your licensed webfont into assets/fonts/ and point this at it.
   Until the file exists the browser falls through to the stack in
   --font-display below, so nothing breaks in the meantime. */
@font-face {
    font-family: "Cubano";
    src:
        url("fonts/cubano-400.woff2") format("woff2"),
        url("fonts/cubano-400.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Ink on cream, cream on cocoa. */
    --cocoa: #3b2517; /* page background */
    --cocoa-deep: #2e1c11; /* pressed / darker chrome */
    --cream: #f2ece0; /* card surface */
    --cream-dim: #e4daca; /* hairlines on cream */
    --ink: #3b2517; /* text on cream */
    --ink-soft: #6e5644; /* secondary text on cream */
    --on-cocoa: #f2ece0; /* text on the page background */

    --clay: #b3402c; /* errors */
    --sage: #9cc49a; /* the "session" pill */
    --sage-ink: #2f4a2e;

    --radius-card: 26px;
    --radius-pill: 999px;
    --radius-cell: 14px;

    --tap: 52px; /* minimum comfortable tap target */

    /* ── EDIT THESE TWO ────────────────────────────────────────────────────
     --font-display  headings, and the pill labels in admin
     --font-body     everything else, including form labels

     First name wins; the rest are fallbacks used only if it fails to load. */
    --font-display:
        "Cubano", "Avenir Next Condensed", "Helvetica Neue Condensed",
        "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Old Standard TT", Georgia, "Times New Roman", Times, serif;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--cocoa);
    color: var(--on-cocoa);
    font-family: var(--font-body);
    /* 17px minimum: below 16px iOS zooms the page on focus, which in a
     captive-portal browser looks like the page has broken. */
    font-size: 17px;
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}
a:hover,
a:focus-visible {
    text-decoration: underline;
}

.wrap {
    max-width: 34rem;
    margin: 0 auto;
    padding: 34px 20px 56px;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.wrap:has(.wide) {
    max-width: 76rem;
}

/* ── masthead ───────────────────────────────────────────────────────────── */
.brand {
    text-align: center;
    margin: 0 0 30px;
}
.brand-mark {
    display: block;
    margin: 0 auto;
    width: 168px;
    height: auto;
}
.brand-tagline {
    margin: 22px 0 0;
    color: var(--on-cocoa);
    font-size: 17px;
}
/* The line that tells a guest they are online sits on the page background,
   above the card — it is a status, not part of the form. */
.brand-status {
    margin: 22px 0 0;
    font-size: 17px;
}
.brand-status strong {
    font-weight: 700;
}

/* ── cards ──────────────────────────────────────────────────────────────── */
.card {
    background: var(--cream);
    color: var(--ink);
    border-radius: var(--radius-card);
    padding: 34px 30px;
    margin: 0 0 18px;
    text-align: center;
}
.card.wide {
    text-align: left;
    padding: 30px 26px;
}
.card h2 {
    margin: 0 0 18px;
    font-family: var(--font-display);
    font-size: 26px;
    /* 400, not 700: Cubano ships one weight and is already heavy. Asking for bold
     makes the browser synthesise a fake one, which smears the letterforms. */
    font-weight: 700;
    text-transform: uppercase;
}
.lead {
    margin: 0 0 24px;
    font-size: 18px;
    line-height: 1.45;
}
.muted {
    color: var(--ink-soft);
}
.small {
    font-size: 15px;
}
.note {
    margin: 26px 0 0;
    color: var(--ink-soft);
    font-size: 15px;
}
.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── forms ──────────────────────────────────────────────────────────────── */
/* Labels use the BODY face, not the display one — Old Standard TT, per the
   brief. Uppercase and letter-spacing carry the hierarchy instead of weight.
   To put them back on Cubano, swap --font-body for --font-display here. */
.field-label {
    display: block;
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
}

.input {
    width: 100%;
    min-height: var(--tap);
    padding: 13px 22px;
    font-family: var(--font-body);
    font-size: 18px;
    color: var(--ink);
    text-align: center;
    background: transparent;
    border: 1px solid var(--ink);
    border-radius: var(--radius-pill);
}
.input::placeholder {
    color: var(--ink-soft);
    opacity: 0.55;
}
.input:focus {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}
.input.is-error {
    border-color: var(--clay);
    box-shadow: 0 0 0 3px rgba(179, 64, 44, 0.16);
}

/* The one-time code field.
 *
 * Deliberately a plain input. It used to be six drawn cells with digits
 * positioned into them by letter-spacing, which only stays aligned while the
 * font metrics cooperate — and it visibly broke the moment real digits were
 * typed. A single field cannot misalign, and paste, autofill and the OS
 * one-time-code suggestion all work in it.
 */
.code-input {
    max-width: 15rem;
    margin: 0 auto 20px;
    font-family: var(--font-body);
    font-size: 30px;
    letter-spacing: 0.32em;
    /* letter-spacing adds a trailing gap after the last character, which shifts
       centred text left by half of it. Nudge it back. */
    text-indent: 0.32em;
}
.code-input::placeholder {
    letter-spacing: 0.32em;
    opacity: 0.32;
}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    min-height: 48px;
    padding: 12px 30px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.3;
    text-align: center;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
}
.btn-primary {
    background: var(--cocoa);
    color: var(--cream);
}
.btn-secondary {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}
.btn-block {
    display: block;
    width: 100%;
}
.btn-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
}
.btn-row .btn {
    flex: 0 1 auto;
}

/* ── messages ───────────────────────────────────────────────────────────── */
.alert {
    /* Room above and below. Adjacent block margins collapse, so the 20px here
       and the 20px under .code-input give one 20px gap, not 40. */
    margin: 20px 0 24px;
    font-size: 16px;
    line-height: 1.4;
}
.alert-error {
    color: var(--clay);
}
.alert-ok {
    color: var(--ink-soft);
}

/* ── success ────────────────────────────────────────────────────────────── */
.tick {
    display: block;
    width: 106px;
    height: 106px;
    margin: 0 auto 26px;
    background: var(--cocoa);
    border-radius: 50%;
}
.tick svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── the "wrong email?" strip ───────────────────────────────────────────── */
.strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: var(--cream);
    color: var(--ink);
    border-radius: var(--radius-card);
    padding: 20px 22px;
    text-align: left;
}
/* Needs the family spelled out: .strip sits outside .card, so the `.card h2`
   rule never reaches it and it would inherit the body serif. */
.strip h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    text-transform: uppercase;
}

/* ── admin ──────────────────────────────────────────────────────────────── */
.tabs {
    display: flex;
    gap: 12px;
    margin: 0 0 20px;
    flex-wrap: wrap;
}
.tab {
    padding: 11px 24px;
    font-size: 17px;
    color: var(--on-cocoa);
    border: 1px solid var(--cream);
    border-radius: var(--radius-pill);
}
.tab.is-on {
    background: var(--cream);
    color: var(--ink);
}

.table-scroll {
    overflow-x: auto;
}
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}
.table th,
.table td {
    padding: 15px 14px;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}
.table thead th {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 400;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--ink);
}
.table tbody td {
    border-bottom: 1px solid var(--cream-dim);
}
.table tbody tr:last-child td {
    border-bottom: 0;
}
.rule {
    height: 1px;
    background: var(--ink);
    margin: 0 0 4px;
}

.pill {
    display: inline-block;
    padding: 4px 15px;
    border-radius: var(--radius-pill);
    font-size: 15px;
}
.pill-session,
.pill-active {
    background: var(--sage);
    color: var(--sage-ink);
}
.pill-grace,
.pill-pending {
    background: var(--clay);
    color: var(--cream);
}
.pill-blocked {
    background: var(--cocoa);
    color: var(--cream);
}

.btn-danger {
    background: var(--clay);
    color: var(--cream);
    padding: 7px 16px;
    min-height: 0;
    font-size: 15px;
}

.foot {
    display: none;
}

/* ── rating ─────────────────────────────────────────────────────────────── */
/* Five submit buttons. No JavaScript, so every guest gets the control — see
   the comment in Views/connected.php. */
.rating {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.star {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 60px;
    padding: 12px 0;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--ink);
    border-radius: var(--radius-cell);
    cursor: pointer;
}
.star svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.6;
    stroke-linejoin: round;
}
/* No hover-to-preview without scripting, so the pressed state does the work. */
.star:hover,
.star:focus-visible {
    background: var(--cocoa);
    color: var(--cream);
}
.star:hover svg,
.star:focus-visible svg {
    stroke: var(--cream);
    fill: var(--cream);
}
.rating-ends {
    display: flex;
    justify-content: space-between;
    max-width: 340px;
    margin: 10px auto 0;
    color: var(--ink-soft);
    font-size: 14px;
}
.textarea {
    min-height: 132px;
    padding: 16px 20px;
    text-align: left;
    border-radius: var(--radius-cell);
    resize: vertical;
}

/* ── narrow phones ──────────────────────────────────────────────────────── */
/*
 * At 390px the card's own padding leaves ~330px, which is not quite enough for
 * "Resend code" and "Get Wi-fi access" side by side, so the row wrapped and the
 * two buttons stacked. Trimming the horizontal padding buys back the ~40px
 * needed. Vertical padding is untouched — the 48px tap target stays.
 */
@media (max-width: 430px) {
    .card {
        padding: 30px 20px;
    }
    .btn {
        padding: 12px 18px;
        font-size: 17px;
    }
    .btn-row {
        gap: 10px;
        flex-wrap: nowrap;
    }
    .code-input {
        font-size: 27px;
    }
}