/* GeekMatter Accounts — admin and self-service screens.
   Tokens come from /css/brand.css, linked first. This is a tool, so it uses the
   Game Night palette at low volume: white panels, one accent, no confetti. */

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

:root {
    --ac-bg:      var(--gm-paper, #FFFBF2);
    --ac-card:    var(--gm-card, #FFFFFF);
    --ac-ink:     var(--gm-ink, #0D221B);
    --ac-soft:    var(--gm-ink-soft, #4D675F);
    --ac-accent:  var(--gm-ac-library-text, #17755F);
    --ac-border:  #E9E0D0;
    --ac-danger:  #B3261E;
    --ac-ok:      #1F7A4D;
    --ac-radius:  12px;
}

body {
    font-family: var(--gm-font-body, 'Nunito', system-ui, sans-serif);
    background: var(--ac-bg); color: var(--ac-ink);
    line-height: 1.6; min-height: 100vh;
    display: flex; flex-direction: column;
}
h1, h2, h3 { font-family: var(--gm-font-round, 'Baloo 2', sans-serif); font-weight: 800; }
a { color: var(--ac-accent); }
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 3px solid var(--gm-orange, #FD9900); outline-offset: 2px;
}

/* ---- chrome ---- */
.ac-header { background: var(--ac-card); border-bottom: 2px solid var(--ac-border); }
.ac-header__inner {
    max-width: 62rem; margin: 0 auto; padding: 0.9rem 1rem;
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
}
.ac-logo {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--gm-font-round, sans-serif); font-weight: 800;
    font-size: 1.25rem; color: var(--ac-accent); text-decoration: none;
}
.ac-crumb { font-family: var(--gm-font-round, sans-serif); font-weight: 700; color: var(--ac-soft); }
.ac-nav { margin-left: auto; display: flex; gap: 1rem; font-size: 0.9rem; }
.ac-nav a { font-family: var(--gm-font-round, sans-serif); font-weight: 700; text-decoration: none; }
.ac-nav a[aria-current="page"] { color: var(--ac-ink); border-bottom: 3px solid var(--gm-orange, #FD9900); }

.ac-main { flex: 1; width: 100%; max-width: 62rem; margin: 0 auto; padding: 1.75rem 1rem 3rem; }
.ac-main > h1 { font-size: 1.6rem; margin-bottom: 0.35rem; }
.ac-lede { color: var(--ac-soft); max-width: 60ch; margin-bottom: 1.5rem; }
.ac-note { color: var(--ac-soft); font-size: 0.9rem; max-width: 62ch; margin-bottom: 0.9rem; }

.ac-panel {
    background: var(--ac-card); border: 2px solid var(--ac-border);
    border-radius: var(--ac-radius); padding: 1.35rem; margin-bottom: 1.35rem;
}
.ac-panel h2 { font-size: 1.15rem; margin-bottom: 0.5rem; }

/* ---- forms ---- */
.ac-form label {
    display: block; margin-top: 0.85rem; margin-bottom: 0.3rem;
    font-family: var(--gm-font-round, sans-serif); font-weight: 700;
    font-size: 0.85rem; color: var(--ac-soft);
}
/* Every text-like input, not a hand-listed set. Listing "text" and "email"
   silently left password fields unstyled — they rendered at the browser's
   default size next to styled neighbours, which is exactly the kind of bug an
   allow-list invites. Excluding the box types is the robust way round. */
.ac-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
    width: 100%; height: 2.8rem; padding: 0 0.75rem;
    font: inherit; color: var(--ac-ink); background: var(--ac-bg);
    border: 2px solid var(--ac-border); border-radius: 10px;
}
.ac-form input:focus {
    outline: none;
    border-color: var(--gm-teal, #24AA8F);
    box-shadow: 0 0 0 3px rgba(36, 170, 143, 0.18);
}
.ac-form__row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.ac-form .gm-btn { margin-top: 1.1rem; }

.ac-apps { border: 0; margin-top: 1.1rem; }
.ac-apps legend {
    font-family: var(--gm-font-round, sans-serif); font-weight: 700;
    font-size: 0.85rem; color: var(--ac-soft); margin-bottom: 0.4rem;
}
/* Wide enough that the longest name ("Corrupted Chronicles — Lite") fits on one
   line at normal widths; `stretch` keeps every pill in a row the same height
   when one of them does wrap anyway. */
.ac-apps__grid {
    display: grid; gap: 0.45rem;
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    align-items: stretch;
}
.ac-appbox {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.5rem 0.75rem; border: 2px solid var(--ac-border);
    /* A rounded rectangle, not a 999px lozenge: a two-line label inside a full
       pill reads as a mistake, inside a rounded box it reads as deliberate. */
    border-radius: var(--ac-radius);
    font-size: 0.88rem; line-height: 1.3; cursor: pointer;
    background: var(--ac-bg);
    min-height: 2.6rem;
}
/* Fixed-width emoji column so the labels line up down the grid rather than
   starting at a different x for every row. */
.ac-appbox__emoji { flex: 0 0 1.35rem; text-align: center; font-size: 1.05rem; }
.ac-appbox input { flex: 0 0 auto; }
.ac-appbox > span:last-child { flex: 1; }
.ac-appbox:has(input:checked) { border-color: var(--gm-teal, #24AA8F); background: #EAF7F3; }
.ac-appbox:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.ac-appbox input { accent-color: var(--gm-teal, #24AA8F); }
.ac-appbox__emoji { font-size: 1rem; }

/* ---- roster ---- */
.ac-roster { display: grid; gap: 1rem; }
.ac-person {
    border: 2px solid var(--ac-border); border-radius: var(--ac-radius);
    padding: 1rem 1.1rem; background: var(--ac-bg);
}
.ac-person__head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.ac-person__who { display: flex; flex-direction: column; margin-right: auto; }
.ac-person__who strong { font-size: 1.05rem; }
.ac-person__email { font-size: 0.85rem; color: var(--ac-soft); }
.ac-person__meta { font-size: 0.8rem; color: var(--ac-soft); margin-top: 0.15rem; }
.ac-person__apps { margin-top: 0.9rem; }
.ac-person__acts { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-top: 0.9rem; }

.ac-chip {
    font-size: 0.65rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.07em; padding: 0.15rem 0.6rem;
    border: 2px solid var(--ac-ink); border-radius: 999px; white-space: nowrap;
}
.ac-chip--ok      { background: #DCF0E4; border-color: var(--ac-ok);   color: #14532D; }
.ac-chip--admin   { background: #FDF0D8; border-color: #9A6B00;        color: #6B4A00; }
.ac-chip--pending { background: #E7EEF8; border-color: #2C6FA8;        color: #1F5580; }
.ac-chip--off     { background: #EFEFEF; border-color: #6B6B6B;        color: #3A3A3A; }

.ac-btn {
    font-family: var(--gm-font-round, sans-serif); font-weight: 700; font-size: 0.85rem;
    padding: 0.4rem 0.95rem; border-radius: 999px; cursor: pointer;
    border: 2px solid var(--ac-border); background: var(--ac-card); color: var(--ac-accent);
}
.ac-btn:hover { background: #F2F7F5; }
.ac-btn[disabled] { opacity: 0.6; cursor: progress; }
.ac-btn--primary { background: var(--gm-orange, #FD9900); border-color: var(--gm-orange, #FD9900); color: var(--ac-ink); }
.ac-btn--primary:hover { background: var(--gm-orange-deep, #D97513); }

.ac-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.1rem; font-size: 0.95rem; }
.ac-facts dt { color: var(--ac-soft); }
.ac-applist { list-style: none; display: grid; gap: 0.35rem; }
.ac-applist li { display: flex; gap: 0.5rem; align-items: center; }

.ac-error, .ac-ok { margin-top: 0.8rem; font-size: 0.9rem; border-radius: 10px; padding: 0.5rem 0.7rem; }
.ac-error { color: var(--ac-danger); background: #FDECEA; border: 2px solid #F3C4BF; }
.ac-ok    { color: var(--ac-ok);     background: #E6F4EC; border: 2px solid #BFE3CE; }

.ac-footer { border-top: 2px solid var(--ac-border); background: var(--ac-card); }
.ac-footer__inner {
    max-width: 62rem; margin: 0 auto; padding: 1rem;
    font-size: 0.85rem; color: var(--ac-soft);
}

/* ---- standalone pages (set password, forgot) — no chrome, just a card ---- */
.ac-solo { display: flex; }
.ac-solo__main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; }
.ac-solo__card {
    width: 100%; max-width: 26rem; background: var(--ac-card);
    border: 2px solid var(--ac-border); border-radius: var(--ac-radius); padding: 1.75rem;
}
.ac-solo__brand {
    display: flex; align-items: center; gap: 0.5rem;
    font-family: var(--gm-font-round, sans-serif); font-weight: 800;
    font-size: 1.3rem; color: var(--ac-accent); margin-bottom: 1.1rem;
}
.ac-solo__card h1 { font-size: 1.3rem; margin-bottom: 0.6rem; }
.ac-solo__card .gm-btn { width: 100%; }