/*
    The borrower's page.

    One card on the Rememberfy paper colour, sized for a phone held in one hand,
    because that is where a "have you got my drill" link gets opened. No web
    fonts: the system stack renders instantly, needs no third-party origin, and
    is what the reader's phone already looks like.
*/

:root {
    color-scheme: light;

    --accent: #ff6f52;
    --paper: #fbf7f4;
    --card: #ffffff;
    --ink: #2e2723;
    --ink-quiet: #6b5f58;
    --ink-faint: #9a8c84;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--paper);
    color: var(--ink);
    font: 16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

.card {
    width: 100%;
    max-width: 380px;
    background: var(--card);
    border-radius: 24px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 8px 30px rgba(46, 39, 35, 0.08);
}

.brand {
    margin: 0 0 24px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--accent);
}

h1 {
    margin: 0 0 20px;
    font-size: 24px;
    line-height: 1.25;
    /* A borrower can call an item anything at all, including one long word. */
    overflow-wrap: anywhere;
}

.lead {
    margin: 0 0 12px;
    color: var(--ink-quiet);
    overflow-wrap: anywhere;
}

.label {
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.due {
    margin: 0 0 28px;
    font-size: 17px;
    font-weight: 600;
}

.quiet {
    margin: 0;
    color: var(--ink-quiet);
}

.tick {
    margin: 0 0 8px;
    font-size: 44px;
    line-height: 1;
    color: var(--accent);
}

button {
    width: 100%;
    /* Comfortably past the 44px tap target, for a thumb on a phone. */
    min-height: 56px;
    border: 0;
    border-radius: 18px;
    background: var(--accent);
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

button:active {
    opacity: 0.85;
}

button[disabled] {
    opacity: 0.6;
    cursor: default;
}

.retry {
    margin-top: 16px;
}