@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Nunito+Sans:wght@400;700&display=swap");
* { box-sizing: border-box; }
body {
    font-family: 'Nunito Sans','Segoe UI',Arial,sans-serif;
    background: #f3f4f6;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.card {
    margin: auto;
    background: #fff;
    width: 100%;
    max-width: 380px;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
h1 { margin: 0 0 1.25rem; font-size: 1.5rem; }
label { display: block; margin: 1rem 0 .35rem; font-weight: 600; font-size: .9rem; }
label small { font-weight: 400; color: #6b7280; }
input[type=email], input[type=password], main.card input[type=text] {
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
}
input:focus { outline: 2px solid #8b6b4c; border-color: transparent; }
button {
    width: 100%;
    margin-top: 1.5rem;
    padding: .75rem;
    background: #2563eb;
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
}
button:hover { background: #1d4ed8; }
.error { background: #fef2f2; color: #b91c1c; padding: .65rem .75rem; border-radius: 6px; font-size: .9rem; }
.alt { margin-top: 1.25rem; text-align: center; font-size: .9rem; }
a { color: #6b4f3a; }

.site-footer {
    padding: 1.25rem 1rem;
    text-align: center;
    font-size: .9rem;
    color: #6b7280;
}
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; }
.site-footer p { margin: .75rem 0 0; }

/* ===== Glaze Manager page (body.glaze-page) ===== */
.glaze-page {
    font-family: 'Nunito Sans','Segoe UI',Arial,sans-serif;
    background: #f4efe6;
    max-width: 1200px;
    margin: auto;
    padding: 20px;
    display: block;
    min-height: 0;
}
.glaze-page h1 { font-size: 2em; margin: .67em 0; }
.glaze-page .card {
    background: #fffaf4;
    width: auto;
    max-width: none;
    margin: 20px 0 0;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.glaze-page .btn,
.glaze-page a.btn {
    background: #6b4f3a;
    color: #fff;
    width: auto;
    margin: 0;
    padding: 10px 14px;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
}
.glaze-page .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.glaze-page .row input[type=text] {
    flex: 1;
    min-width: 180px;
    padding: 9px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
}
.glaze-page .message { margin-top: 20px; padding: 10px 14px; background: #e7d3c2; border-radius: 6px; }
.glaze-page .fires { margin-top: 12px; }
.glaze-page .fires label {
    display: inline;
    margin: 0 12px 0 0;
    font-weight: normal;
    font-size: inherit;
}
.glaze-page .table-wrap { overflow-x: auto; }
.glaze-page table { width: 100%; border-collapse: collapse; }
.glaze-page th { background: #8b6b4c; color: #fff; text-align: left; }
.glaze-page th, .glaze-page td { padding: 10px; border-bottom: 1px solid #ddd; }
.glaze-page .badge { padding: 3px 8px; border-radius: 12px; background: #e7d3c2; margin-right: 4px; }

/* Restore the glaze page's original look: undo global rules from the top of this file */
.glaze-page,
.glaze-page *,
.glaze-page *::before,
.glaze-page *::after { box-sizing: revert; }
.glaze-page a:not(.btn) { color: revert; }
.glaze-page input:focus { outline: revert; border-color: revert; }
.glaze-page .alt { margin-top: 1em; text-align: left; font-size: inherit; }
.glaze-page .site-footer { padding: 0; text-align: left; font-size: inherit; color: inherit; }
.glaze-page .site-footer nav { display: block; }
.glaze-page .site-footer p { margin: 1em 0; }
.success { color: #2e7d32; }

/* ===== Phone friendly ===== */
html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }

@media (max-width: 600px) {
    body { padding: 12px; }
    .card { padding: 1.25rem; }
    h1 { font-size: 1.35rem; }

    /* 16px text stops iPhones from zooming in when a box is tapped */
    input, select, textarea { font-size: 16px !important; }

    /* Bigger tap targets */
    button, .btn, a.btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        box-sizing: border-box;
    }

    /* Glaze Manager / Admin / Application Methods pages */
    .glaze-page { padding: 12px; }
    .glaze-page h1 { font-size: 1.5em; margin: .5em 0; }
    .glaze-page .card { margin-top: 14px; padding: 14px; }
    .glaze-page .row > input[type=text] { flex-basis: 100%; }

    /* Tables turn into one card per row */
    .glaze-page table.stack,
    .glaze-page table.stack tbody,
    .glaze-page table.stack tr,
    .glaze-page table.stack td { display: block; width: 100%; }
    .glaze-page table.stack tr.head-row { display: none; }
    .glaze-page table.stack tr { padding: 8px 0; border-bottom: 2px solid #8b6b4c; }
    .glaze-page table.stack tr:last-child { border-bottom: none; }
    .glaze-page table.stack td { border-bottom: none; padding: 6px 0; }
    .glaze-page table.stack td[data-label] { display: flex; gap: 10px; align-items: center; }
    .glaze-page table.stack td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 90px;
        font-weight: bold;
        color: #6b4f3a;
    }
    .glaze-page table.stack td.act { display: inline-block; width: auto; margin-right: 8px; vertical-align: top; }
}

/* ===== Fonts: Fraunces headings, Nunito Sans text ===== */
h1, h2, h3 { font-family: 'Fraunces',Georgia,serif; font-weight: 600; }
button, input, select, textarea { font-family: inherit; }

/* ===== File upload buttons match the other buttons ===== */
input[type=file]::file-selector-button{background:#6b4f3a;color:#fff;border:none;border-radius:6px;padding:10px 14px;margin-right:12px;font-family:inherit;font-size:14px;cursor:pointer}
input[type=file]::file-selector-button:hover{background:#563f2e}
