:root {
    --bg: #faf6ef;
    --bg-card: #fffdf9;
    --brown: #8a6f52;
    --brown-dark: #5f4c39;
    --brown-light: #e8ddcd;
    --green: #93c47d;
    --green-dark: #6f9c58;
    --text: #3a332b;
    --border: #e3d6c3;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.install-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    background: var(--brown-light);
    color: var(--brown-dark);
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    text-align: center;
}

.install-banner-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.install-banner button {
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
}

.install-banner-actions button:not(.dismiss) {
    background: var(--brown);
    color: white;
    padding: 0.4rem 0.9rem;
}

.install-banner-actions button:not(.dismiss):hover {
    background: var(--brown-dark);
}

.install-banner button.dismiss {
    background: transparent;
    color: var(--brown-dark);
    font-size: 1.2rem;
    line-height: 1;
    padding: 0.1rem 0.4rem;
}

.login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    text-align: center;
}

.login-page h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.5rem;
    color: var(--brown-dark);
    margin: 0;
}

.login-page .tagline {
    color: var(--brown);
    margin: 0 0 1.5rem;
}

.login-page form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 320px;
}

.login-page input[type="email"] {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--bg-card);
}

.login-page button {
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 8px;
    background: var(--brown);
    color: white;
    font-size: 1rem;
    cursor: pointer;
}

.login-page button:hover {
    background: var(--brown-dark);
}

.login-page .check-mail {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    color: var(--brown-dark);
}

.login-page .error {
    color: #a33;
    margin: 0;
}

.matrix-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

@media (max-width: 640px) {
    .matrix-page {
        padding: 1rem 0.5rem 2rem;
    }
}

.matrix-page header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.matrix-page h1 {
    font-family: Georgia, "Times New Roman", serif;
    color: var(--brown-dark);
    margin: 0;
}

.matrix-page .subtitle {
    margin: 0.15rem 0 0 0.25rem;
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--brown-dark);
}

.matrix-page .user-email {
    color: var(--brown);
    font-size: 0.9rem;
}

.loading {
    text-align: center;
    padding: 3rem;
    color: var(--brown);
}

/*
 * The matrix is a CSS grid, not a <table> -- each "row" component (month
 * header, header row, duty row) is `display: contents`, so its children are
 * unwrapped directly into the grid and laid out column-by-column by the
 * grid container. This is what lets the tips cell reflow onto its own
 * full-width line on narrow screens (see the media query below) without any
 * horizontal scrolling: a real <table> can't do that kind of per-breakpoint
 * reordering since a <td> can never leave its row.
 */
.table-wrap {
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    overflow: hidden;
}

.duty-table {
    display: grid;
    grid-template-columns: 3rem 4.5rem 4.5rem 1fr;
    width: 100%;
}

.row-header,
.duty-row {
    display: contents;
}

.row-header > * {
    position: sticky;
    top: 0;
    background: var(--brown-light);
    color: var(--brown-dark);
    font-weight: 600;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--border);
}

.duty-row > * {
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--border);
}

.duty-row.even > * {
    background: #f8f4e9;
}

.duty-row:hover > * {
    background: #fbf3e6;
}

.month-header {
    grid-column: 1 / -1;
    background: var(--brown);
    color: white;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    padding: 0.6rem 0.9rem;
}

.col-day {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--brown-dark);
    text-align: center;
}

.row-header .col-day,
.row-header .col-owner {
    text-align: center;
    justify-content: center;
}

.duty-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.duty-cell .swatch {
    display: inline-block;
    width: 100%;
    max-width: 3.5rem;
    height: 1.75rem;
    border-radius: 6px;
    background: #f1ebe0;
    border: 1px solid var(--border);
    transition: background 0.15s ease;
}

.duty-cell:hover .swatch {
    border-color: var(--green-dark);
}

.duty-cell.active .swatch {
    background: var(--green);
    border-color: var(--green-dark);
}

.tips-cell textarea {
    display: block;
    width: 100%;
    min-height: 2.5rem;
    resize: none;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
    background: transparent;
}

.tips-cell textarea:hover,
.tips-cell textarea:focus {
    background: #fbf3e6;
    border-color: var(--border);
    outline: none;
}

/* Phones: keep Dag/GiGe/LiHe on one compact line, drop the tips column onto
   its own full-width line below instead of forcing horizontal scroll. */
@media (max-width: 640px) {
    .duty-table {
        grid-template-columns: 2.25rem 1fr 1fr;
    }

    .tips-header {
        display: none;
    }

    /* `.duty-row` stops being `display: contents` here and becomes its own
       nested grid instead. With `contents`, the day/GiGe/LiHe/tips cells of
       every date all flatten into one shared grid, and the empty column-1
       slot left in a date's "tips line" would get auto-filled by the *next*
       date's day cell -- which both misplaces that day number and made the
       tips box's border look like it spanned the full width. Giving each
       row its own grid keeps every date's four cells self-contained. */
    .duty-row {
        display: grid;
        grid-template-columns: 2.25rem 1fr 1fr;
        grid-column: 1 / -1;
        border-bottom: 1px solid var(--border);
        /* On mobile `.duty-row` is a real box (unlike desktop's `display:
           contents`), so the empty cell below the day number (no element
           sits there once tips moves to its own line) is part of this box
           too. Painting the even/odd tint here as well -- not just on the
           child cells below -- covers that empty cell with the right color
           instead of leaving it showing the card's base background. */
        background: var(--bg-card);
    }

    .duty-row.even {
        background: #f8f4e9;
    }

    .duty-row > * {
        border-bottom: none;
    }

    .tips-cell {
        grid-column: 2 / -1;
        padding-top: 0;
    }
}