/* One stylesheet, no framework. This site lives for a few days and is read by one person on
   whatever device is nearest, so it wants to be legible and quick far more than it wants to be
   fashionable. */
:root {
    color-scheme: light;
    --ink: #1c1a17;
    --muted: #6b6560;
    --line: #ded8d0;
    --paper: #faf8f5;
    --accent: #7a4a1e;
    --good: #2c6b43;
    --bad: #a32020;
    --bad-bg: #fdeeee;
    --warn: #8a6a12;
    --warn-bg: #fdf6e7;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 16px/1.55 -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    background: #fff;
}

.hd { background: var(--accent); color: #fff; }
.hd__in { max-width: 46rem; margin: 0 auto; padding: 1rem 1.25rem; }
.hd__cafe { font-weight: 700; font-size: 1.1rem; }
.hd__sub { opacity: .8; margin-left: .5rem; font-size: .9rem; }

.wrap { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
/* The handover page only. It carries an address and a sign-in side by side and needs the room --
   header, content and footer together, so the bar above does not end short of the text below it. */
.wrap--wide .wrap,
.wrap--wide .hd__in,
.wrap--wide .ft { max-width: 68rem; }

.ft {
    max-width: 46rem;
    margin: 0 auto;
    padding: 0 1.25rem 2.5rem;
    color: var(--muted);
    font-size: .85rem;
}

h1 { font-size: 1.7rem; margin: .25rem 0 .75rem; color: var(--accent); }
h2 { font-size: 1.15rem; margin: 1.75rem 0 .5rem; }
h3 { font-size: 1rem; margin: 1.25rem 0 .4rem; }

.lede { font-size: 1.05rem; color: #37332f; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: .95rem; white-space: nowrap; }
.nowrap { white-space: nowrap; }
/* Scrolls rather than breaking. A password wrapped across two lines is one somebody mistypes, and
   the whole point of this page is that it is transcribed correctly, once. */
.scroll { overflow-x: auto; }
.opt { color: var(--muted); font-weight: 400; font-size: .85em; }
.right { text-align: right; }
code { font-family: ui-monospace, Consolas, monospace; background: var(--paper); padding: 0 .25rem; }

label { display: block; margin: .9rem 0 .2rem; font-weight: 600; }
input, select {
    width: 100%;
    padding: .55rem .6rem;
    font: inherit;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: inherit;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.hint { color: var(--muted); font-size: .88rem; margin: .25rem 0 0; }

.card {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1.1rem 1.25rem 1.4rem;
    margin: 1rem 0 1.5rem;
    background: var(--paper);
}

.row { display: flex; gap: .75rem; flex-wrap: wrap; }
.row > div { flex: 1 1 9rem; }
.row--day { align-items: center; gap: .5rem; margin-bottom: .4rem; flex-wrap: nowrap; }
.row--day .row__label { flex: 0 0 6rem; font-weight: 600; font-size: .95rem; }
.row--rate { align-items: end; margin-top: .75rem; }

.check { display: flex; align-items: center; gap: .5rem; margin: .9rem 0; }
.check input { width: auto; }
.check label { margin: 0; }

.btn {
    display: inline-block;
    margin: 1rem .4rem 0 0;
    padding: .6rem 1.2rem;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.btn--quiet { background: transparent; color: var(--accent); }
.btn--danger { background: transparent; color: var(--bad); border-color: var(--bad); }
.btn--small { padding: .25rem .6rem; font-size: .85rem; margin: 0; }

.good, .bad, .warn, .note {
    padding: .8rem 1rem;
    border-radius: 6px;
    margin: 1rem 0;
    border-left: 3px solid;
}
.good { background: #eef5ee; border-color: var(--good); }
.bad { background: var(--bad-bg); border-color: var(--bad); }
.warn { background: var(--warn-bg); border-color: var(--warn); }
.note { background: var(--paper); border-color: var(--line); color: #3a3632; }
.bad ul, .warn ul { margin: .4rem 0 0; padding-left: 1.1rem; }

.shops { list-style: none; margin: 1rem 0; padding: 0; }
.shops__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: .8rem 1rem;
    margin-bottom: .6rem;
}
.shops__row .btn { margin-top: 0; }
.shops__where { color: var(--muted); margin-left: .5rem; }

.pill {
    display: inline-block;
    margin-left: .5rem;
    padding: .1rem .55rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
}
/* Not colour alone: the words say which state this is, so it reads correctly in a screenshot,
   in print, and to anybody who does not distinguish the two colours. */
.pill--ok { background: #e4efe6; color: var(--good); }
.pill--todo { background: var(--warn-bg); color: var(--warn); }

table { border-collapse: collapse; width: 100%; margin: .75rem 0 1rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.rates__total td { font-weight: 700; border-top: 2px solid var(--line); }
.summary { font-size: .95rem; }
.summary--creds td { vertical-align: middle; }

/* Each credential on its own line, labelled, so the email and the password are told apart at a
   glance instead of being two similar-looking strings stacked on top of each other. */
.cred { display: block; margin: .15rem 0; }
.cred__label {
    display: inline-block;
    min-width: 4.75rem;
    color: var(--muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.cred .mono { user-select: all; }   /* one click selects the whole value, not half of it */

@media (max-width: 34rem) {
    .wrap--wide .wrap, .wrap--wide .hd__in, .wrap--wide .ft { max-width: 100%; }
    .cred__label { min-width: 0; margin-right: .4rem; }
    .row--day { flex-wrap: wrap; }
    .row--day .row__label { flex: 1 0 100%; }
    table, thead, tbody, th, td, tr { display: block; }
    thead { display: none; }
    td { border: none; padding: .15rem 0; }
    tr { border-bottom: 1px solid var(--line); padding: .6rem 0; }
}

/* Opening hours: the Closed tick on each day, and the whole week greyed when by appointment only. */
.row--day .closed { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; margin: 0; font-size: .9rem; font-weight: 500; white-space: nowrap; }
.row--day .closed input { width: auto; margin: 0; }
.row--day input:disabled { opacity: .45; }
.week--off { opacity: .55; }
.check--appointment { margin-bottom: .25rem; }