/* ============================================================
   Optimus Club — Base Styles
   Mobile-first. Typographic, restrained, paper-toned.
   ============================================================ */

/* ------------------------------------------------------------
   Design tokens
   ------------------------------------------------------------ */
:root {
    /* Grayscale layers — applied to text and headings so a page
       has depth without color. Use --ink for headings/brand,
       --text for body copy, --text-soft for supporting lines,
       --text-meta for fine print / placeholders. */
    --ink:         #1a1a1a;
    --ink-strong:  #333333;
    --text:        #4a4a4a;
    --text-soft:   #6e6e6e;
    --text-meta:   #9a9a9a;

    --rule:        #d9d4c6;
    --rule-soft:   #ebe7db;

    --paper:       #fafaf7;
    --panel:       #ffffff;
}

/* Reset */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

/* Base typography. The body is a column flex so that a navbar (if
   present) sits at the top in normal flow while <main> expands to
   fill the remaining viewport. Pages without a nav still get centered
   content because <main> carries its own flex centering. */
body {
    font-family: "Namdhinggo", serif;
    font-weight: 400;
    font-style: normal;
    color: var(--text);
    background-color: var(--paper);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.5;
}

/* <main> stacks its children vertically and centers them in both axes
   (flex-direction: column → main-axis is vertical). Per-page content
   classes can override justify-content to top-align when they want
   more of a "page" feel (see .profile-page). */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    width: 100%;
}

/* ============================================================
   Icons — Google Material Symbols (Outlined)
   ------------------------------------------------------------
   Variable-axis font. Default axes are tuned for an elegant,
   restrained feel (thin-ish weight, no fill, balanced grade).
   Use the size utility classes below; avoid hand-setting the
   icon font-size elsewhere so the grid stays consistent.

   - .icon-sm   16px   inline, alongside small text
   - .icon-md   20px   default / form-adjacent (checkmarks, etc.)
   - .icon-lg   24px   header iconography
   - .icon-xl   32px   feature placements

   State colors:
   - .icon-success  forest green (saved confirmations)
   - .icon-error    muted brick red (save failures)
   - .icon-muted    --text-meta (decorative / secondary)
   ============================================================ */
.material-symbols-outlined {
    font-family: "Material Symbols Outlined", sans-serif;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-variation-settings:
        "FILL" 0,
        "wght" 300,
        "GRAD" 0,
        "opsz" 24;
    vertical-align: middle;
    /* A square box that clips: if the font is slow or blocked, the ligature
       name (e.g. "progress_activity") would otherwise show as a word. */
    width: 1em;
    height: 1em;
    overflow: hidden;
}

.icon-sm { font-size: 16px; font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 20; }
.icon-md { font-size: 20px; font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 20; }
.icon-lg { font-size: 24px; font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24; }
.icon-xl { font-size: 32px; font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 32; }

.icon-success { color: #4a7c59; }   /* forest green — reserved for saved state */
.icon-error   { color: #a8503e; }   /* muted brick — reserved for error state */
.icon-muted   { color: var(--text-meta); }

/* Headings use Arvo slab serif */
h1, h2, h3, h4, h5, h6 {
    font-family: "Arvo", serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ink);
}

h1 { font-size: 2.25rem; }
@media (min-width: 768px) { h1 { font-size: 3.25rem; } }
@media (min-width: 1024px) { h1 { font-size: 4rem; } }

/* ============================================================
   Logo
   ------------------------------------------------------------
   Two assets live in /static/img/:

   - logo-stacked.svg   — full wordmark with tagline + founding
                          year. Use as a hero at widths ≥ 220px
                          and heights > 48px.
   - logo-compact.svg   — single-line wordmark. Use in any
                          container whose rendered height is
                          ≤ 48px (headers, mobile bars, chips).
                          Below that, the stacked mark's tagline
                          loses legibility.

   Design rule: if your logo slot is ≤ 48px tall, reach for the
   compact asset. Otherwise use the stacked asset.
   ============================================================ */
.logo {
    display: block;
    width: auto;
    height: auto;
}

.logo--hero {
    width: 100%;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .logo--hero { max-width: 720px; }
}

.logo--compact {
    height: 36px;
}

@media (min-width: 768px) {
    .logo--compact { height: 40px; }
}

/* ============================================================
   Navbar
   ------------------------------------------------------------
   Shown on authenticated pages. Three-column grid on desktop:
   brand · centered links · user menu. Mobile collapses to
   brand · hamburger, with a dropdown panel below.

   Datastar signals on the <nav>:
   - menuOpen — mobile hamburger panel
   - userOpen — desktop user dropdown
   ============================================================ */
.navbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--panel);
    border-bottom: 1px solid var(--rule);
    padding: 0.75rem 1.25rem;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
}

.navbar-brand {
    justify-self: start;
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* Desktop-only regions are hidden by default (mobile-first) */
.navbar-links,
.navbar-user {
    display: none;
}

/* Hamburger — three stacked bars */
.navbar-hamburger {
    justify-self: end;
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
}

.navbar-hamburger .hamburger-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ink);
}

/* Mobile dropdown panel */
.navbar-mobile-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--panel);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.04);
    padding: 0.75rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
}

.navbar-mobile-user {
    color: var(--text-soft);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    padding: 0.75rem 0;
}

.navbar-mobile-item {
    color: var(--text-soft);
    text-decoration: none;
    font-family: "Namdhinggo", serif;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    padding: 0.75rem 0;
}

.navbar-mobile-item:hover {
    color: var(--ink-strong);
}

.navbar-mobile-item--active {
    color: var(--ink);
    border-bottom: 1px solid var(--text);
    align-self: flex-start;
    padding-right: 0.75rem;
}

.navbar-mobile-divider {
    height: 1px;
    background: var(--rule-soft);
    margin: 0.35rem 0;
}

/* Desktop layout */
@media (min-width: 768px) {
    .navbar {
        grid-template-columns: 1fr auto 1fr;
        padding: 1rem 2rem;
    }

    .navbar-links {
        display: flex;
        list-style: none;
        align-items: center;
        justify-self: center;
    }

    /* Hairline pipe divider sits between items. The margin on each
       side keeps the links visually balanced around the pipe. */
    .navbar-links li + li {
        margin-left: 1.25rem;
        padding-left: 1.25rem;
        border-left: 1px solid var(--rule);
    }

    .navbar-link {
        color: var(--text-soft);
        text-decoration: none;
        font-family: "Namdhinggo", serif;
        font-weight: 500;
        font-size: 0.82rem;
        letter-spacing: 0.12em;
        padding: 0.35rem 0;
        border-bottom: 1px solid transparent;
        transition: border-color 0.15s ease, color 0.15s ease;
    }

    .navbar-link:hover {
        color: var(--ink-strong);
    }

    .navbar-link--active {
        color: var(--ink);
        border-bottom-color: var(--text);
    }

    .navbar-user {
        display: flex;
        justify-self: end;
        position: relative;
    }

    .navbar-user-trigger {
        background: none;
        border: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-family: "Namdhinggo", serif;
        color: var(--ink-strong);
        font-size: 0.95rem;
        padding: 0.5rem 0.75rem;
        border-radius: 4px;
        transition: background-color 0.15s ease;
    }

    .navbar-user-trigger:hover {
        background: var(--paper);
    }

    .navbar-caret {
        color: var(--text-meta);
        font-size: 0.8em;
    }

    .navbar-user-menu {
        position: absolute;
        top: calc(100% + 0.4rem);
        right: 0;
        min-width: 180px;
        background: var(--panel);
        border: 1px solid var(--rule);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
        display: flex;
        flex-direction: column;
        z-index: 11;
    }

    .navbar-user-menu-item {
        padding: 0.75rem 1rem;
        color: var(--ink-strong);
        text-decoration: none;
        font-family: "Namdhinggo", serif;
        font-size: 0.95rem;
    }

    .navbar-user-menu-item:hover {
        background: var(--paper);
        color: var(--ink);
    }

    .navbar-hamburger,
    .navbar-mobile-panel {
        display: none !important;
    }
}

/* ============================================================
   PMC Report (placeholder — post-login landing)
   ============================================================ */
.pmc-report {
    text-align: center;
    padding: 3rem 1.5rem;
}

/* ============================================================
   Profile
   ------------------------------------------------------------
   Button-less inline edit: input carries its own value and
   status icon (driven by Datastar signals — saving / saved /
   error). No separate edit button; auto-save is debounced
   800ms after the last keystroke.
   ============================================================ */
.profile-page {
    justify-content: flex-start;
    padding: 2.5rem 1.5rem;
}

@media (min-width: 768px) {
    .profile-page { padding: 4rem 2rem; }
}

.profile-card {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

.profile-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1.25rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--rule);
}

.profile-heading {
    font-size: 1.75rem;
    margin: 0;
}

@media (min-width: 768px) {
    .profile-heading { font-size: 2rem; }
}

.profile-field {
    margin-bottom: 2rem;
}

.profile-field-label {
    display: block;
    font-family: "Namdhinggo", serif;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-bottom: 0.5rem;
}

.profile-field-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-bottom: 1px solid var(--rule);
    transition: border-color 0.15s ease;
}

.profile-field-row:focus-within {
    border-bottom-color: var(--ink);
}

.profile-field-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 0.5rem 0;
    font-family: "Arvo", serif;
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--ink);
}

.profile-field-input::placeholder {
    color: var(--text-meta);
    font-weight: 300;
    font-style: italic;
}

.profile-field-status {
    flex-shrink: 0;
}

/* Saved checkmark: holds for ~2.1s then fades out. The animation is
   keyed to the element itself, so each time Datastar removes the
   inline display:none (signal transitions to "saved"), the element
   re-enters layout and the animation replays from the start. */
.profile-field-status--saved {
    animation: profile-saved-flash 3s ease-out forwards;
}

@keyframes profile-saved-flash {
    0%, 70% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* Saving spinner — continuous until status flips to saved or error. */
.profile-field-status--saving {
    animation: profile-spin 1.2s linear infinite;
}

@keyframes profile-spin {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}

.profile-field-error {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #a8503e;
}

.profile-field-hint {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-meta);
    font-style: italic;
}

.profile-field--readonly .profile-field-readonly-value {
    font-family: "Arvo", serif;
    font-size: 1.1rem;
    color: var(--ink-strong);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--rule-soft);
}

/* ============================================================
   Teams
   ------------------------------------------------------------
   Airy, typography-first layout. A single column that holds the
   section heading, create-team input, add-member controls, and
   the teams roster table. Table uses generous row height and
   hairline rules so it reads like a print directory rather than
   a data grid.

   Datastar signals (seeded on <main>):
     newTeamName / assignUserId / assignTeamId / removeUserId
     teamsError
   ============================================================ */
.teams-page {
    justify-content: flex-start;
    padding: 2.5rem 1.5rem 4rem;
}

@media (min-width: 768px) {
    .teams-page { padding: 4rem 2rem 6rem; }
}

.teams-header,
.teams-content {
    width: 100%;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.teams-header {
    margin-bottom: 2.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--rule);
}

.teams-heading {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .teams-heading { font-size: 2.75rem; }
}

.teams-subheading {
    font-family: "Namdhinggo", serif;
    font-size: 1rem;
    color: var(--text-soft);
    max-width: 52ch;
    line-height: 1.6;
}

.teams-error {
    background: transparent;
    color: #a8503e;
    font-size: 0.9rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e4c5bd;
    margin-bottom: 1.75rem;
}

.teams-section {
    margin-bottom: 3rem;
}

.teams-section-title {
    font-family: "Namdhinggo", serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-bottom: 1.25rem;
}

.teams-create-row,
.teams-assign-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .teams-create-row,
    .teams-assign-row {
        flex-direction: row;
        align-items: stretch;
    }
}

.teams-input,
.teams-select {
    flex: 1;
    min-width: 0;
    font-family: "Arvo", serif;
    font-size: 1.05rem;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rule);
    padding: 0.65rem 0.25rem;
    outline: none;
    transition: border-color 0.15s ease;
    border-radius: 0;
}

.teams-input:focus,
.teams-select:focus {
    border-bottom-color: var(--ink);
}

.teams-input::placeholder {
    color: var(--text-meta);
    font-style: italic;
    font-weight: 300;
}

.teams-select {
    font-family: "Namdhinggo", serif;
    font-size: 1rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-meta) 50%),
                      linear-gradient(-45deg, transparent 50%, var(--text-meta) 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 8px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 1.75rem;
}

.teams-btn {
    font-family: "Namdhinggo", serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--panel);
    background: var(--ink);
    border: none;
    padding: 0.7rem 1.25rem;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    white-space: nowrap;
    align-self: flex-start;
}

@media (min-width: 640px) {
    .teams-btn { align-self: auto; }
}

.teams-btn:hover { background: var(--ink-strong); }
.teams-btn:active { background: var(--text); }

.teams-btn[disabled],
.teams-btn:disabled {
    background: var(--rule);
    color: var(--text-meta);
    cursor: not-allowed;
}

.teams-hint {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-meta);
    font-style: italic;
}

.teams-empty {
    color: var(--text-soft);
    font-size: 0.95rem;
    padding: 1rem 0;
}

/* Roster table — airy, print-directory feel. No vertical rules;
   only a single hairline header rule and soft between-rows rules. */
.teams-section--table {
    margin-top: 3.5rem;
}

.teams-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.25rem;
}

.teams-table thead th {
    font-family: "Namdhinggo", serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-meta);
    text-align: left;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--rule);
}

.teams-table tbody td {
    padding: 1.4rem 0.75rem;
    border-bottom: 1px solid var(--rule-soft);
    vertical-align: top;
    font-family: "Namdhinggo", serif;
    color: var(--text);
}

.teams-col-name {
    width: 28%;
    min-width: 160px;
}

.teams-col-count {
    width: 64px;
    text-align: right;
    font-family: "Arvo", serif;
    font-size: 1rem;
    color: var(--text-soft);
}

.teams-name {
    font-family: "Arvo", serif;
    font-size: 1.2rem;
    color: var(--ink);
}

.teams-member-empty {
    color: var(--text-meta);
    font-style: italic;
    font-size: 0.9rem;
}

.teams-member-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    margin: 0;
    padding: 0;
}

.teams-member {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.25rem 0.25rem 0.25rem 0;
    color: var(--ink-strong);
    font-size: 0.95rem;
}

.teams-member + .teams-member {
    border-left: 1px solid var(--rule);
    padding-left: 0.75rem;
}

.teams-member-name {
    font-family: "Namdhinggo", serif;
}

.teams-member-remove {
    background: none;
    border: none;
    padding: 2px;
    margin-left: 0.1rem;
    color: var(--text-meta);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    border-radius: 2px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.teams-member-remove:hover {
    color: #a8503e;
    background: var(--paper);
}

/* Badge next to a team lead. Members carry none: leading is the exception. */
.teams-role-badge {
    font-family: "Namdhinggo", serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    border: 1px solid var(--ink-strong);
    border-radius: 2px;
    padding: 0.05rem 0.4rem;
    margin-left: 0.15rem;
}

/* Inline role picker shown only when the viewer may change teams. */
.teams-role-select {
    font-family: "Namdhinggo", serif;
    font-size: 0.78rem;
    color: var(--text-soft);
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 0.1rem 0.3rem;
    margin-left: 0.25rem;
    cursor: pointer;
}

.teams-role-select:focus {
    outline: none;
    border-color: var(--ink);
    color: var(--ink);
}

/* Role picker in the "Add a member" row is narrower than the name selects. */
.teams-select--role {
    flex: 0 0 auto;
    min-width: 7.5rem;
}

/* Actions column — narrow, right-aligned */
.teams-col-actions {
    width: 72px;
    text-align: right;
    vertical-align: middle;
}

/* Icon-only action buttons (edit / delete) */
.teams-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
}

.teams-icon-btn {
    background: none;
    border: none;
    padding: 4px;
    color: var(--text-meta);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    border-radius: 2px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.teams-icon-btn:hover {
    color: var(--ink-strong);
    background: var(--paper);
}

.teams-icon-btn--danger:hover {
    color: #a8503e;
    background: var(--paper);
}

/* Inline rename — input + save/cancel inside the name cell */
.teams-name-edit {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.teams-input--inline {
    font-size: 0.95rem;
    padding: 0.35rem 0.25rem;
}

.teams-edit-btns {
    display: flex;
    gap: 0.5rem;
}

/* Small text buttons used for save / cancel / yes / no */
.teams-text-btn {
    font-family: "Namdhinggo", serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    background: none;
    padding: 0.25rem 0.5rem;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.teams-text-btn--save {
    color: var(--panel);
    background: var(--ink);
}

.teams-text-btn--save:hover {
    background: var(--ink-strong);
}

.teams-text-btn--save[disabled],
.teams-text-btn--save:disabled {
    background: var(--rule);
    color: var(--text-meta);
    cursor: not-allowed;
}

.teams-text-btn--danger {
    color: #a8503e;
    background: transparent;
    border: 1px solid #e4c5bd;
}

.teams-text-btn--danger:hover {
    background: #fdf0ed;
    border-color: #a8503e;
}

.teams-text-btn--cancel {
    color: var(--text-soft);
}

.teams-text-btn--cancel:hover {
    color: var(--ink);
    background: var(--paper);
}

/* Delete confirmation inline widget */
.teams-delete-confirm {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.teams-confirm-label {
    font-family: "Namdhinggo", serif;
    font-size: 0.78rem;
    color: var(--text-soft);
    font-style: italic;
}

/* Phones: a member now carries a role badge and picker, which pushed the
   roster wider than the screen. Drop the size column, tighten the cell
   padding and let each member's controls wrap under their name. */
@media (max-width: 639px) {
    .teams-col-count { display: none; }
    .teams-col-name { width: auto; min-width: 0; }
    .teams-col-actions { width: auto; }
    .teams-table thead th,
    .teams-table tbody td {
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }
    .teams-member { flex-wrap: wrap; }
}

/* ============================================================
   Landing
   ------------------------------------------------------------
   The container widens to accommodate the hero wordmark (720px
   on desktop). The form is held to its own narrower width so it
   stays comfortable to fill regardless of how wide the logo is.
   ============================================================ */
.landing {
    text-align: center;
    padding: 2.5rem 1.5rem;
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.landing .logo--hero {
    margin-bottom: 3.5rem;
}

.landing-form {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .landing { padding: 3rem 2rem; }
    .landing .logo--hero { margin-bottom: 5rem; }
}

/* ============================================================
   Auth pages
   ============================================================ */
.auth-container {
    text-align: center;
    padding: 1.5rem;
    width: 100%;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}

.auth-container h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .auth-container h1 { font-size: 2.5rem; }
}

.auth-subtitle {
    font-size: 1.125rem;
    color: var(--text-soft);
    margin-bottom: 2rem;
}

.auth-detail {
    font-size: 1rem;
    color: var(--text-meta);
    margin-bottom: 1rem;
}

.auth-link {
    margin-top: 2rem;
    font-size: 0.95rem;
    color: var(--text-soft);
}

.auth-link a {
    color: var(--ink-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-link a:hover {
    color: var(--ink);
}

/* ============================================================
   Forms
   ============================================================ */
.form-group {
    margin-bottom: 1rem;
}

input[type="email"] {
    width: 100%;
    padding: 0.875rem 1rem;
    font-family: "Namdhinggo", serif;
    font-size: 1rem;
    color: var(--ink);
    background-color: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 4px;
    outline: none;
    transition: border-color 0.2s ease;
}

input[type="email"]::placeholder {
    color: var(--text-meta);
}

input[type="email"]:focus {
    border-color: var(--ink);
}

button[type="submit"] {
    width: 100%;
    padding: 0.875rem 1rem;
    font-family: "Namdhinggo", serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--panel);
    background-color: var(--ink);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

button[type="submit"]:hover {
    background-color: var(--ink-strong);
}

button[type="submit"]:active {
    background-color: var(--text);
}

/* ============================================================
   Holdings
   ------------------------------------------------------------
   Two-zone layout: a transaction entry form at the top and a
   running ledger table below. The form uses a three-column
   grid on desktop. Typography follows the same restrained
   slab-serif + humanist mix used across the portal.

   Datastar signals (seeded on <main>):
     ticker / txDate / shares / price / txType / notes
     priceStatus / priceMsg / holdingsError
     txOffset / hasMore
   ============================================================ */
.holdings-page {
    justify-content: flex-start;
    padding: 2.5rem 1.5rem 4rem;
}

@media (min-width: 768px) {
    .holdings-page { padding: 4rem 2rem 6rem; }
}

.holdings-header,
.holdings-body {
    width: 100%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.holdings-header {
    margin-bottom: 2.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--rule);
}

.holdings-heading {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .holdings-heading { font-size: 2.75rem; }
}

.holdings-subheading {
    font-family: "Namdhinggo", serif;
    font-size: 1rem;
    color: var(--text-soft);
    max-width: 56ch;
    line-height: 1.6;
}

/* ── Section titles ────────────────────────────────────────── */
.holdings-section-title {
    font-family: "Namdhinggo", serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-bottom: 1.5rem;
}

/* ── Transaction form ──────────────────────────────────────── */
.holdings-form-section {
    margin-bottom: 3.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--rule-soft);
}

.holdings-form-error {
    background: transparent;
    color: #a8503e;
    font-size: 0.9rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e4c5bd;
    margin-bottom: 1.5rem;
}

.holdings-form {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* Rows within the form */
.holdings-form-row {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .holdings-form-row--top {
        flex-direction: row;
        align-items: flex-end;
        gap: 2rem;
    }

    .holdings-form-row--middle {
        flex-direction: row;
        align-items: flex-end;
        gap: 2rem;
    }
}

.holdings-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}

.holdings-form-group--full {
    flex: unset;
    width: 100%;
    max-width: 520px;
}

.holdings-form-group--total {
    min-width: 140px;
}

/* Labels */
.holdings-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: "Namdhinggo", serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.holdings-label-optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-meta);
    font-size: 0.75rem;
}

/* Inputs / selects */
.holdings-input,
.holdings-select {
    font-family: "Arvo", serif;
    font-size: 1.05rem;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rule);
    padding: 0.6rem 0.2rem;
    outline: none;
    transition: border-color 0.15s ease;
    border-radius: 0;
    width: 100%;
}

.holdings-input:focus,
.holdings-select:focus {
    border-bottom-color: var(--ink);
}

.holdings-input::placeholder {
    color: var(--text-meta);
    font-style: italic;
    font-weight: 300;
}

.holdings-input--ticker {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.holdings-select {
    font-family: "Namdhinggo", serif;
    font-size: 1rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-meta) 50%),
                      linear-gradient(-45deg, transparent 50%, var(--text-meta) 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 8px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 1.75rem;
}

/* Price-fetch inline status icons */
.holdings-price-status,
.holdings-price-found {
    display: inline-flex;
    align-items: center;
    color: var(--text-meta);
}

.holdings-price-found {
    color: #4a7c59;
}

.holdings-price-error {
    font-size: 0.8rem;
    color: #a8503e;
    margin-top: 0.35rem;
    font-style: italic;
}

@keyframes holdings-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.holdings-spin {
    animation: holdings-spin 1s linear infinite;
}

/* Total amount read-only display */
.holdings-total {
    font-family: "Arvo", serif;
    font-size: 1.25rem;
    color: var(--ink);
    padding: 0.55rem 0.2rem;
    border-bottom: 1px solid var(--rule-soft);
    min-height: 2.6rem;
    display: flex;
    align-items: center;
}

/* Submit button */
.holdings-form-row--submit {
    flex-direction: row;
}

.holdings-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: "Namdhinggo", serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--panel);
    background: var(--ink);
    border: none;
    padding: 0.75rem 1.4rem;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.holdings-submit:hover { background: var(--ink-strong); }
.holdings-submit:active { background: var(--text); }

.holdings-submit[disabled],
.holdings-submit:disabled {
    background: var(--rule);
    color: var(--text-meta);
    cursor: not-allowed;
}

/* ── Transaction history table ─────────────────────────────── */
.holdings-tx-section {
    margin-top: 1rem;
}

.holdings-empty {
    color: var(--text-soft);
    font-size: 0.95rem;
    padding: 1.25rem 0;
}

.holdings-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.holdings-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.holdings-table thead th {
    font-family: "Namdhinggo", serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-meta);
    text-align: left;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
}

.holdings-table tbody td {
    padding: 1.1rem 0.75rem;
    border-bottom: 1px solid var(--rule-soft);
    vertical-align: middle;
    font-family: "Namdhinggo", serif;
    color: var(--text);
    font-size: 0.95rem;
}

/* Column widths */
.holdings-col-date   { width: 108px; white-space: nowrap; }
.holdings-col-ticker { width: 80px; }
.holdings-col-team   { width: 140px; }
.holdings-col-type   { width: 72px; }
.holdings-col-shares { width: 80px; text-align: right; font-family: "Arvo", serif; }
.holdings-col-price  { width: 100px; text-align: right; font-family: "Arvo", serif; }
.holdings-col-total  { width: 120px; text-align: right; font-family: "Arvo", serif; font-weight: 700; color: var(--ink-strong); }
.holdings-col-notes  { min-width: 120px; color: var(--text-soft); }

/* Ticker badge */
.holdings-ticker {
    font-family: "Arvo", serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.04em;
}

/* Buy / Sell type badge */
.holdings-badge {
    display: inline-block;
    font-family: "Namdhinggo", serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
}

.holdings-badge--buy {
    color: #2e5c3a;
    background: #e8f2eb;
    border: 1px solid #b8d9bf;
}

.holdings-badge--sell {
    color: var(--text-soft);
    background: var(--paper);
    border: 1px solid var(--rule);
}

.holdings-notes-text {
    font-size: 0.88rem;
    color: var(--text-soft);
    font-style: italic;
}

.holdings-notes-empty {
    color: var(--text-meta);
}

/* Load more */
.holdings-load-more {
    text-align: center;
    padding: 2rem 0 0.5rem;
}

.holdings-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: "Namdhinggo", serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-soft);
    background: none;
    border: 1px solid var(--rule);
    padding: 0.6rem 1.25rem;
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.holdings-load-more-btn:hover {
    color: var(--ink);
    border-color: var(--ink);
    background: var(--paper);
}

.holdings-count {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--text-meta);
    font-style: italic;
}

/* ── Team filter bar ───────────────────────────────────────── */
.holdings-tx-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.holdings-tx-header .holdings-section-title {
    margin-bottom: 0;
}

.holdings-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.holdings-filter-tab {
    font-family: "Namdhinggo", serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-soft);
    background: none;
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.holdings-filter-tab:hover {
    color: var(--ink);
    border-color: var(--ink-strong);
}

.holdings-filter-tab--active {
    color: var(--ink);
    background: var(--panel);
    border-color: var(--ink);
}

/* ── Team column & badge ───────────────────────────────────── */
.holdings-col-team {
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.holdings-team-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-soft);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: 0.15rem 0.45rem;
    white-space: nowrap;
}

.holdings-team-badge--unknown {
    color: var(--text-meta);
    font-style: italic;
}

/* ── Transfer trigger button (inline in team cell) ─────────── */
.holdings-transfer-trigger {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.1rem;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

tr:hover .holdings-transfer-trigger {
    opacity: 1;
}

.holdings-transfer-trigger:hover .material-symbols-outlined {
    color: var(--text);
}

/* ── Transfer overlay ──────────────────────────────────────── */
.holdings-transfer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 26, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}

.holdings-transfer-panel {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 2rem;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.holdings-transfer-panel-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--ink);
}

.holdings-transfer-title {
    font-family: "Arvo", serif;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

.holdings-transfer-desc {
    font-size: 0.9rem;
    color: var(--text-soft);
    line-height: 1.5;
}

.holdings-transfer-select {
    width: 100%;
}

.holdings-transfer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* ── Shared action buttons ─────────────────────────────────── */
.holdings-btn-secondary {
    font-family: "Namdhinggo", serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-soft);
    background: none;
    border: 1px solid var(--rule);
    padding: 0.5rem 1rem;
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.holdings-btn-secondary:hover {
    color: var(--ink);
    border-color: var(--ink-strong);
}

.holdings-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: "Namdhinggo", serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--panel);
    background: var(--ink);
    border: 1px solid var(--ink);
    padding: 0.5rem 1rem;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.holdings-btn-primary:hover { background: var(--ink-strong); }
.holdings-btn-primary[disabled],
.holdings-btn-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Team selector in form ─────────────────────────────────── */
.holdings-form-row--team {
    margin-bottom: 0.5rem;
}

.holdings-select--team {
    max-width: 300px;
}

.holdings-no-teams {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    color: var(--text-soft);
    font-style: italic;
    padding: 0.5rem 0;
}

.holdings-no-teams-link {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ============================================================
   Stock Contest
   ------------------------------------------------------------
   One page: a summary strip, a line chart of every pick, the
   standings, and the PDF report form. Mobile first; the extra
   price and trend columns appear from 720px. Gains use the
   forest green and losses the muted brick of the icon states,
   everything else stays in the grayscale of the site.

   Datastar signals (seeded on <main>):
     year / focus / refreshing / refreshNote / contestError
     pickOpen / pickID / pickMember / pickCompany / pickSymbol
     pickShares / pickStartPrice / pickError / pickSaving
     reportDate / compareDate
   ============================================================ */
.contest-page {
    justify-content: flex-start;
    padding: 2.5rem 1rem 4rem;
}

@media (min-width: 768px) {
    .contest-page { padding: 4rem 2rem 6rem; }
}

.contest-header,
.contest-body {
    width: 100%;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}

.contest-header {
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--rule);
}

.contest-heading {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .contest-heading { font-size: 2.75rem; }
}

.contest-subheading {
    font-size: 1rem;
    color: var(--text-soft);
    max-width: 56ch;
    line-height: 1.6;
}

/* Gain and loss tones */
.contest-gain { color: #4a7c59; }
.contest-loss { color: #a8503e; }
.contest-muted { color: var(--text-meta); }
.contest-gain-line { stroke: #4a7c59; }
.contest-loss-line { stroke: #a8503e; }

/* ── Year tabs ─────────────────────────────────────────────── */
.contest-years {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.contest-year {
    font-family: "Arvo", serif;
    font-size: 1rem;
    color: var(--text-soft);
    text-decoration: none;
    padding-bottom: 0.2rem;
    border-bottom: 2px solid transparent;
}

.contest-year:hover { color: var(--ink); }

.contest-year-start {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0 0 0.2rem;
    font-family: "Namdhinggo", serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-soft);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.contest-year-start:hover { color: var(--ink); border-bottom-color: var(--rule); }

.contest-year--active {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

/* ── Status line and admin toolbar ─────────────────────────── */
.contest-status {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-bottom: 1.75rem;
}

@media (min-width: 640px) {
    .contest-status {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.contest-status-text {
    font-size: 0.95rem;
    color: var(--ink-strong);
}

.contest-status-soft,
.contest-status-note {
    color: var(--text-soft);
}

.contest-status-live,
.contest-status-note {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-soft);
}

.contest-status-note { color: #a8503e; }

.contest-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* ── Summary strip ─────────────────────────────────────────── */
.contest-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 640px) {
    .contest-stats { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

.contest-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.9rem;
    border-top: 2px solid var(--ink);
}

.contest-stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.contest-stat-value {
    font-family: "Arvo", serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.contest-stat-detail {
    font-size: 0.9rem;
    color: var(--text-soft);
}

/* ── Sections ──────────────────────────────────────────────── */
.contest-section {
    margin-bottom: 3rem;
}

.contest-section-title {
    font-family: "Namdhinggo", serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-bottom: 1rem;
}

/* ── Chart ─────────────────────────────────────────────────── */
.contest-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.contest-section-head .contest-section-title { margin-bottom: 0; }

/* The shared line definitions: present in the page, never drawn. */
.contest-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.contest-scale {
    display: inline-flex;
    border: 1px solid var(--rule);
    border-radius: 2px;
    overflow: hidden;
}

.contest-scale-btn {
    padding: 0.35rem 0.85rem;
    font-family: "Namdhinggo", serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-soft);
    background: transparent;
    border: none;
    cursor: pointer;
}

.contest-scale-btn + .contest-scale-btn { border-left: 1px solid var(--rule); }
.contest-scale-btn:hover { color: var(--ink); }

.contest-scale-btn--active,
.contest-scale-btn--active:hover {
    color: var(--panel);
    background: var(--ink);
}

.contest-readout {
    min-height: 1.6rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    color: var(--text-soft);
    font-style: italic;
}

.contest-readout span:not(:first-child) {
    font-style: normal;
    font-weight: 600;
    color: var(--ink);
}

.contest-chart {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.5rem;
    padding-top: 0.5rem;
}

.contest-yaxis {
    position: relative;
    grid-column: 1;
    grid-row: 1;
}

.contest-ylabel {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    font-family: "Arvo", serif;
    font-size: 0.7rem;
    color: var(--text-meta);
    white-space: nowrap;
}

.contest-ylabel--zero {
    color: var(--ink-strong);
    font-weight: 700;
}

.contest-plot {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    height: 280px;
}

@media (min-width: 768px) {
    .contest-plot { height: 400px; }
}

.contest-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

.contest-path {
    fill: none;
    vector-effect: non-scaling-stroke;
}

.contest-grid {
    fill: none;
    stroke: var(--rule-soft);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.contest-grid--zero {
    stroke: var(--text-meta);
}

.contest-line {
    fill: none;
    stroke-width: 1.25;
    stroke-linejoin: round;
    stroke-linecap: round;
    transition: opacity 0.15s ease;
}

.contest-line.contest-gain-line,
.contest-line.contest-loss-line { opacity: 0.5; }

.contest-chart--focus .contest-line.contest-gain-line,
.contest-chart--focus .contest-line.contest-loss-line { opacity: 0.14; }

.contest-line--average {
    stroke: var(--ink);
    stroke-width: 2.25;
    stroke-dasharray: 7 5;
    opacity: 1;
}

.contest-line--focus {
    stroke: var(--ink);
    stroke-width: 3;
    opacity: 1;
    pointer-events: none;
}

.contest-line--hit {
    stroke: transparent;
    stroke-width: 14;
    pointer-events: stroke;
    cursor: pointer;
}

.contest-xaxis {
    position: relative;
    grid-column: 2;
    grid-row: 2;
    height: 1.75rem;
}

.contest-xlabel {
    position: absolute;
    top: 0.45rem;
    transform: translateX(-50%);
    font-family: "Arvo", serif;
    font-size: 0.7rem;
    color: var(--text-meta);
}

.contest-xlabel--edge { transform: none; }
.contest-xlabel--end { transform: translateX(-100%); }

.contest-chart-note {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-soft);
}

/* ── Standings table ───────────────────────────────────────── */
.contest-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.contest-table {
    width: 100%;
    border-collapse: collapse;
}

.contest-table thead th {
    font-family: "Namdhinggo", serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-meta);
    text-align: left;
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid var(--ink);
    white-space: nowrap;
    vertical-align: bottom;
}

.contest-th-top {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    color: var(--text-meta);
    opacity: 0.8;
}

.contest-table tbody td,
.contest-table tfoot td {
    padding: 0.7rem 0.5rem;
    border-bottom: 1px solid var(--rule-soft);
    vertical-align: middle;
    font-size: 0.95rem;
}

.contest-row { transition: background-color 0.12s ease; }
.contest-row--focus { background: var(--rule-soft); }

.contest-col-rank {
    width: 2.25rem;
    text-align: center !important;
    font-family: "Arvo", serif;
    color: var(--text-meta);
}

.contest-col-num {
    text-align: right !important;
    white-space: nowrap;
    font-family: "Arvo", serif;
}

.contest-figure { font-weight: 700; }

.contest-col-extra { display: none; }

@media (min-width: 720px) {
    .contest-col-extra { display: table-cell; }
}

.contest-col-trend { width: 96px; }

.contest-cell-pick { position: relative; }

/* Room for the admin's edit button, which sits in the cell's right edge. */
.contest-cell-pick--editable { padding-right: 2.5rem !important; }

.contest-member {
    display: block;
    font-family: "Arvo", serif;
    font-weight: 700;
    color: var(--ink);
    font-size: 0.98rem;
}

.contest-stock {
    display: block;
    font-size: 0.88rem;
    color: var(--text-soft);
}

.contest-shares {
    margin-left: 0.35rem;
    padding: 0 0.35rem;
    border: 1px solid var(--rule);
    border-radius: 2px;
    font-size: 0.75rem;
    color: var(--text);
}

.contest-symbol {
    margin-left: 0.5rem;
    font-family: "Arvo", serif;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--text-meta);
}

.contest-stale {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: #a8503e;
}

.contest-edit {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    padding: 0.35rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 2px;
    color: var(--text-meta);
    cursor: pointer;
}

.contest-edit:hover {
    color: var(--ink);
    border-color: var(--rule);
}

.contest-spark {
    display: block;
    width: 80px;
    height: 24px;
}

.contest-spark-line {
    fill: none;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
}

.contest-average-label {
    font-family: "Arvo", serif;
    font-weight: 700;
    color: var(--ink);
}

.contest-table tfoot td { border-bottom: none; border-top: 1px solid var(--ink); }

.contest-average-label .contest-stock {
    font-family: "Namdhinggo", serif;
    font-weight: 400;
}

/* ── News under a pick ─────────────────────────────────────── */
/* Clicking a row opens the pick's news in a row of its own under it. */
.contest-row { cursor: pointer; }
.contest-row--open { background: var(--rule-soft); }
.contest-row--open td { border-bottom-color: transparent; }

/* The button sits under the pick's rank, where it costs the table no width. */
.contest-news-toggle {
    display: flex;
    align-items: center;
    margin: 0.15rem auto 0;
    padding: 0.1rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 2px;
    color: var(--text-soft);
    cursor: pointer;
}

.contest-news-toggle:hover,
.contest-news-toggle:focus-visible {
    color: var(--ink);
    border-color: var(--rule);
}

.contest-news-toggle .material-symbols-outlined { transition: transform 0.15s ease; }
.contest-news-toggle--open .material-symbols-outlined { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .contest-news-toggle .material-symbols-outlined { transition: none; }
}

.contest-news-row { background: var(--rule-soft); }

.contest-table tbody td.contest-news-cell {
    padding: 0;
    border-bottom: 1px solid var(--rule);
}

.contest-news { padding: 0.25rem 0.75rem 1.25rem; }

@media (min-width: 720px) {
    .contest-news { padding: 0.5rem 1.5rem 1.5rem 2.75rem; }
}

.contest-news-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 68ch;
}

.contest-news-item {
    padding: 0.85rem 0;
    border-top: 1px solid var(--rule);
}

.contest-news-item:first-child { border-top: none; }

.contest-news-title {
    font-family: "Arvo", serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.contest-news-title:hover,
.contest-news-title:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contest-news-meta {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--text-meta);
}

.contest-news-blurb {
    margin: 0.4rem 0 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-soft);
    overflow-wrap: anywhere;
}

.contest-news-status,
.contest-news-message {
    margin: 0.75rem 0;
    font-style: italic;
    color: var(--text-soft);
}

.contest-news-credit {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    font-style: italic;
    color: var(--text-meta);
}

/* ── Report form ───────────────────────────────────────────── */
.contest-report-intro {
    max-width: 60ch;
    margin-bottom: 1.25rem;
    color: var(--text-soft);
    line-height: 1.6;
}

.contest-report-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 560px;
}

/* holdings-form-group is flex: 1, which collapses to nothing in a column. */
.contest-report-form .holdings-form-group { flex: none; }

/* The login form's global submit-button rule is full width; this one is not. */
.contest-report-form .holdings-submit {
    width: auto;
    align-self: flex-start;
    padding: 0.75rem 1.4rem;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    border-radius: 2px;
}

@media (min-width: 640px) {
    .contest-report-form {
        flex-direction: row;
        align-items: flex-end;
        gap: 2rem;
        max-width: none;
    }

    .contest-report-form .holdings-form-group { flex: 0 1 200px; }
}

.contest-report-hint {
    margin-top: 0.75rem;
    font-size: 0.88rem;
    color: #a8503e;
}

/* ── Empty state ───────────────────────────────────────────── */
.contest-empty-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 2rem 0;
}

.contest-empty-title { font-size: 1.4rem; }

.contest-empty-text {
    max-width: 52ch;
    color: var(--text-soft);
    line-height: 1.6;
}

/* ── Add / edit panel ──────────────────────────────────────── */
.contest-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
    background: rgba(26, 26, 26, 0.45);
}

.contest-panel {
    width: 100%;
    max-width: 480px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.75rem;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 4px;
}

.contest-panel-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--ink);
}

.contest-panel-title {
    margin: 0;
    font-family: "Arvo", serif;
    font-size: 1.15rem;
    font-weight: 700;
}

.contest-panel-fields {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contest-panel-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.contest-hint {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-soft);
}

.contest-panel-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.contest-panel-spacer { flex: 1; }

.contest-remove {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.25rem;
    font-family: "Namdhinggo", serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #a8503e;
    background: transparent;
    border: none;
    cursor: pointer;
}

.contest-remove:hover { text-decoration: underline; }

.contest-remove--confirm {
    padding: 0.5rem 0.8rem;
    color: var(--panel);
    background: #a8503e;
    border-radius: 2px;
}

.contest-remove--confirm:hover { text-decoration: none; background: #8f4232; }

/* ===== BEGIN Calendar ===================================================== */
/* ============================================================
   Calendar
   ------------------------------------------------------------
   A month at a glance. Events are colored from a fixed palette:
   the site's own ink, forest and brick, and three muted
   companions of the same lightness. A test keeps this list in
   step with the one in internal/mod/calendar/palette.go and
   checks that each color reads on the paper and panel surfaces.
   Chip text is always ink; the color is the edge and the dot.

   On a phone the squares are too small for a title, so they
   show a dot per event and the month's events are listed as an
   agenda underneath.

   Datastar signals (seeded on <main>):
     calMonth / evOpen / evMode
     evID / evTitle / evDate / evTime / evDuration / evColor
     evRepeat / evUntil / evSummary / evNext / evError / evSaving
   ============================================================ */
:root {
    --cal-ink:    #1a1a1a;
    --cal-forest: #4a7c59;
    --cal-brick:  #a8503e;
    --cal-slate:  #4a6178;
    --cal-ochre:  #8c6d2c;
    --cal-plum:   #7a4f6d;
}

.cal-color--ink    { --cal-event: var(--cal-ink); }
.cal-color--forest { --cal-event: var(--cal-forest); }
.cal-color--brick  { --cal-event: var(--cal-brick); }
.cal-color--slate  { --cal-event: var(--cal-slate); }
.cal-color--ochre  { --cal-event: var(--cal-ochre); }
.cal-color--plum   { --cal-event: var(--cal-plum); }

.cal-page {
    justify-content: flex-start;
    padding: 2.5rem 1rem 4rem;
}

@media (min-width: 768px) {
    .cal-page { padding: 4rem 2rem 6rem; }
}

.cal-header,
.cal-body {
    width: 100%;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}

.cal-header {
    margin-bottom: 1.75rem;
}

.cal-heading {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .cal-heading { font-size: 2.75rem; }
}

.cal-subheading {
    font-size: 1rem;
    color: var(--text-soft);
    line-height: 1.6;
}

.cal-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Next up ───────────────────────────────────────────────── */
.cal-nextup {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 1.25rem;
    padding: 0.9rem 0 1rem;
    margin-bottom: 1.75rem;
    border-top: 2px solid var(--ink);
}

.cal-nextup-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.cal-nextup-none { color: var(--text-soft); font-style: italic; }

.cal-next-event {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.6rem;
    padding: 0;
    font-family: inherit;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}

.cal-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--cal-event, var(--text-meta));
    align-self: center;
    flex: none;
}

.cal-next-title {
    font-family: "Arvo", serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
}

.cal-next-event:hover .cal-next-title { text-decoration: underline; text-underline-offset: 3px; }

.cal-next-when { color: var(--text-soft); }

/* ── Month bar ─────────────────────────────────────────────── */
.cal-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.25rem;
}

.cal-bar-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cal-month {
    font-size: 1.5rem;
    min-width: 9.5ch;
    text-align: center;
}

@media (min-width: 768px) {
    .cal-month { font-size: 1.85rem; min-width: 11ch; }
}

.cal-arrow {
    display: inline-flex;
    padding: 0.3rem;
    color: var(--text-soft);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 2px;
}

.cal-arrow:hover { color: var(--ink); border-color: var(--rule); }

.cal-bar-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.cal-today {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-soft);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.1rem;
}

.cal-today:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ── Month grid ────────────────────────────────────────────── */
.cal-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.cal-grid thead th {
    padding: 0.5rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: left;
    color: var(--text-meta);
    border-bottom: 1px solid var(--ink);
}

.cal-day {
    height: 3.6rem;
    padding: 0.3rem 0.25rem;
    vertical-align: top;
    text-align: center;
    border-top: 1px solid var(--rule-soft);
    border-left: 1px solid var(--rule-soft);
    transition: background-color 0.12s ease;
}

.cal-grid tbody td:first-child { border-left: none; }

.cal-day--weekend { background: color-mix(in srgb, var(--rule-soft) 40%, transparent); }
.cal-day--addable { cursor: pointer; }
.cal-day--addable:hover { background: var(--rule-soft); }

.cal-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.3rem;
    font-family: "Arvo", serif;
    font-size: 0.78rem;
    color: var(--text-soft);
    border-radius: 0.8rem;
}

.cal-day--other .cal-day-number { color: var(--rule); }

.cal-day--today .cal-day-number {
    color: var(--panel);
    background: var(--ink);
}

.cal-events {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.2rem;
    margin-top: 0.15rem;
}

/* On a phone an event is a dot; the agenda below names it. */
.cal-chip {
    width: 0.55rem;
    height: 0.55rem;
    padding: 0;
    font-size: 0;
    background: var(--cal-event);
    border: none;
    border-radius: 50%;
    pointer-events: none;
}

.cal-chip > * { display: none; }

.cal-day--other .cal-chip { opacity: 0.4; }

@media (min-width: 768px) {
    .cal-grid thead th { padding: 0.55rem 0.6rem; }

    .cal-day {
        height: 6.75rem;
        padding: 0.4rem 0.45rem 0.5rem;
        text-align: left;
    }

    .cal-day-number { font-size: 0.82rem; }

    .cal-events {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0.25rem;
        margin-top: 0.3rem;
    }

    .cal-chip {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.05rem;
        width: 100%;
        height: auto;
        padding: 0.2rem 0.45rem;
        font-family: "Namdhinggo", serif;
        font-size: 0.8rem;
        line-height: 1.3;
        text-align: left;
        color: var(--ink);
        background: color-mix(in srgb, var(--cal-event) 12%, white);
        border-left: 3px solid var(--cal-event);
        border-radius: 0 2px 2px 0;
        overflow: hidden;
        cursor: pointer;
        pointer-events: auto;
        transition: background-color 0.12s ease;
    }

    .cal-chip > * { display: inline; }
    .cal-chip:hover { background: color-mix(in srgb, var(--cal-event) 24%, white); }
    .cal-day--other .cal-chip { opacity: 0.55; }

    .cal-chip-time {
        flex: none;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--cal-event);
        white-space: nowrap;
    }

    .cal-chip-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        overflow-wrap: anywhere;
    }
}

/* ── Agenda (phones) ───────────────────────────────────────── */
.cal-agenda { margin-top: 1.75rem; }

@media (min-width: 768px) {
    .cal-agenda { display: none; }
}

.cal-agenda-empty { color: var(--text-soft); font-style: italic; }

.cal-agenda-list { list-style: none; }

.cal-agenda-day {
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    gap: 0.75rem;
    padding: 0.9rem 0;
    border-top: 1px solid var(--rule-soft);
}

.cal-agenda-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
}

.cal-agenda-weekday {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-meta);
}

.cal-agenda-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    font-family: "Arvo", serif;
    font-size: 1.25rem;
    color: var(--ink);
    border-radius: 1rem;
}

.cal-agenda-day--today .cal-agenda-number { color: var(--panel); background: var(--ink); }

.cal-agenda-events {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cal-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-family: inherit;
    text-align: left;
    color: var(--ink);
    background: color-mix(in srgb, var(--cal-event) 12%, white);
    border: none;
    border-left: 3px solid var(--cal-event);
    border-radius: 0 2px 2px 0;
    cursor: pointer;
}

.cal-item-title {
    font-family: "Arvo", serif;
    font-size: 0.95rem;
    font-weight: 700;
}

.cal-item-when {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.84rem;
    color: var(--text-soft);
}

/* ── Event panel ───────────────────────────────────────────── */
.cal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
    background: rgba(26, 26, 26, 0.45);
}

.cal-panel {
    width: 100%;
    max-width: 460px;
    margin: auto;
    padding: 1.75rem;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 4px;
    overflow: hidden;
}

.cal-panel-view,
.cal-panel-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.cal-panel-form { gap: 1.25rem; }

.cal-panel-bar {
    display: block;
    height: 4px;
    margin: -1.75rem -1.75rem 0.9rem;
    background: var(--cal-event, var(--rule));
}

.cal-panel-title {
    margin: 0;
    font-family: "Arvo", serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink);
}

.cal-panel-date { color: var(--ink-strong); }
.cal-panel-when { color: var(--text-soft); }

.cal-panel-repeat {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.92rem;
    color: var(--text-soft);
}

.cal-panel-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.cal-panel-spacer { flex: 1; }

.cal-panel-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--ink);
}

.cal-panel-heading {
    margin: 0;
    font-family: "Arvo", serif;
    font-size: 1.15rem;
    font-weight: 700;
}

.cal-fields {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* holdings-form-group is flex: 1, which collapses to nothing in a column. */
.cal-fields .holdings-form-group { flex: none; }

.cal-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.cal-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 0.4rem;
}

.cal-swatch {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    background: var(--cal-event);
    border: 2px solid var(--panel);
    border-radius: 50%;
    cursor: pointer;
    outline: 1px solid transparent;
    outline-offset: 2px;
    transition: outline-color 0.12s ease;
}

.cal-swatch:hover { outline-color: var(--rule); }
.cal-swatch--on,
.cal-swatch--on:hover { outline: 2px solid var(--ink); }

.cal-summary {
    padding: 0.6rem 0.85rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink-strong);
    background: var(--paper);
    border-left: 2px solid var(--rule);
}

.cal-summary--error { color: #a8503e; border-left-color: #a8503e; }

.cal-summary-next {
    display: block;
    font-size: 0.85rem;
    color: var(--text-soft);
}

.cal-remove {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.25rem;
    font-family: "Namdhinggo", serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #a8503e;
    background: transparent;
    border: none;
    cursor: pointer;
}

.cal-remove:hover { text-decoration: underline; }

.cal-remove--confirm {
    padding: 0.5rem 0.8rem;
    color: var(--panel);
    background: #a8503e;
    border-radius: 2px;
}

.cal-remove--confirm:hover { text-decoration: none; background: #8f4232; }
/* ===== END Calendar ======================================================= */

/* ===== BEGIN Access =====
   The page where a super admin decides who may change what. Reuses the
   teams page's rhythm: hairline rules, small-caps section titles, no color
   beyond the site's own accents.
   Datastar signals (seeded on <main>):
     accessError / accessUserId / accessLevel / accessRole /
     accessPermission / accessGranted
   ============================================================ */
.access-page {
    justify-content: flex-start;
    padding: 2.5rem 1.5rem 4rem;
}

@media (min-width: 768px) {
    .access-page { padding: 4rem 2rem 6rem; }
}

.access-header,
.access-content {
    width: 100%;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.access-header {
    margin-bottom: 2.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--rule);
}

.access-heading {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .access-heading { font-size: 2.75rem; }
}

.access-subheading {
    font-family: "Namdhinggo", serif;
    font-size: 1rem;
    color: var(--text-soft);
    max-width: 56ch;
    line-height: 1.6;
}

.access-error {
    color: #a8503e;
    font-size: 0.9rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e4c5bd;
    margin-bottom: 1.75rem;
}

.access-section { margin-bottom: 3rem; }

.access-section-title {
    font-family: "Namdhinggo", serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-bottom: 1.25rem;
}

.access-groups {
    display: grid;
    gap: 2rem;
}

@media (min-width: 640px) {
    .access-groups { grid-template-columns: 1fr 1fr; }
}

.access-group-title {
    font-family: "Arvo", serif;
    font-size: 1.1rem;
    color: var(--ink);
    margin-bottom: 0.25rem;
}

.access-group-about {
    font-family: "Namdhinggo", serif;
    font-size: 0.9rem;
    color: var(--text-soft);
    margin-bottom: 0.75rem;
}

/* One tickbox with its words. The box is large enough to hit on a phone. */
.access-perm {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--rule-soft);
    font-family: "Namdhinggo", serif;
    color: var(--text);
    cursor: pointer;
}

.access-perm input[type="checkbox"] {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.15rem 0 0;
    accent-color: var(--ink);
    cursor: pointer;
}

.access-perm input[type="checkbox"]:disabled {
    cursor: default;
    opacity: 0.55;
}

.access-perm-text {
    display: flex;
    flex-direction: column;
}

.access-perm-label {
    color: var(--ink);
    font-size: 1rem;
}

.access-perm-hint {
    color: var(--text-soft);
    font-size: 0.85rem;
}

.access-people {
    list-style: none;
    margin: 0;
    padding: 0;
}

.access-person {
    display: grid;
    gap: 0.75rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--rule-soft);
}

@media (min-width: 768px) {
    .access-person {
        grid-template-columns: minmax(0, 1.2fr) 8rem minmax(0, 2fr);
        align-items: start;
        gap: 1.5rem;
    }
}

.access-person-id {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.6rem;
    min-width: 0;
}

.access-person-name {
    font-family: "Arvo", serif;
    color: var(--ink);
}

.access-person-email {
    flex-basis: 100%;
    font-family: "Namdhinggo", serif;
    font-size: 0.85rem;
    color: var(--text-soft);
    overflow-wrap: anywhere;
}

.access-badge {
    font-family: "Namdhinggo", serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    border: 1px solid var(--ink-strong);
    border-radius: 2px;
    padding: 0.05rem 0.4rem;
}

.access-select {
    font-family: "Namdhinggo", serif;
    font-size: 1rem;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    padding: 0.35rem 0.25rem;
    cursor: pointer;
}

.access-select:focus {
    outline: none;
    border-bottom-color: var(--ink);
}

.access-fixed {
    font-family: "Namdhinggo", serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--panel);
    background: var(--ink);
    border-radius: 2px;
    padding: 0.2rem 0.5rem;
}

.access-person-perms {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
}

.access-perm--compact {
    padding: 0.2rem 0;
    border-bottom: none;
    align-items: center;
}

.access-perm--compact input[type="checkbox"] { margin: 0; }

.access-perm--compact .access-perm-label { font-size: 0.95rem; }

.access-notice {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #4a7c59;
}

.access-level-text {
    font-family: "Namdhinggo", serif;
    color: var(--text-soft);
}

/* The right to give access is a different kind of thing from the four
   permissions, so it sits apart from them. */
.access-perm--assign {
    flex-basis: 100%;
    margin-top: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--rule-soft);
}

.access-empty {
    color: var(--text-soft);
    font-size: 0.95rem;
    padding: 1rem 0;
}

.access-hint {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--text-meta);
    font-style: italic;
}
/* ===== END Access ===== */