/*
 * Society Tracker styles.
 *
 * Standalone. Does not depend on lodge-theme.css, so the tracker can move to a
 * subdomain without dragging the site's stylesheet along. The tokens echo the
 * lodge palette (sage, charcoal, amber) so the two do not look like strangers.
 *
 * Light and dark both supported. Dark follows prefers-color-scheme and can be
 * forced with html[data-theme="dark"].
 */

:root {
    --s-bg:          #f4f5f2;
    --s-surface:     #ffffff;
    --s-ink:         #1e2430;
    --s-ink-soft:    #5a6472;
    --s-line:        #d8dcd6;
    --s-accent:      #4a6f5d;   /* sage */
    --s-accent-ink:  #ffffff;
    --s-amber:       #c98a2b;
    --s-danger:      #a2372f;
    --s-ok:          #3f7d45;
    --s-radius:      10px;
    --s-shadow:      0 1px 2px rgba(20, 26, 36, .06), 0 8px 24px rgba(20, 26, 36, .07);
    --s-font:        'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --s-font-head:   'Cinzel', Georgia, serif;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --s-bg:         #0f141c;
        --s-surface:    #161d28;
        --s-ink:        #e7ecf3;
        --s-ink-soft:   #94a1b2;
        --s-line:       #2a3543;
        --s-accent:     #5f9c81;
        --s-accent-ink: #0f141c;
        --s-amber:      #7059c8;   /* the site swaps amber for space purple in dark */
        --s-danger:     #e0736a;
        --s-ok:         #6fbf78;
        --s-shadow:     0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    }
}

:root[data-theme="dark"] {
    --s-bg:         #0f141c;
    --s-surface:    #161d28;
    --s-ink:        #e7ecf3;
    --s-ink-soft:   #94a1b2;
    --s-line:       #2a3543;
    --s-accent:     #5f9c81;
    --s-accent-ink: #0f141c;
    --s-amber:      #7059c8;
    --s-danger:     #e0736a;
    --s-ok:         #6fbf78;
    --s-shadow:     0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--s-bg);
    color: var(--s-ink);
    font-family: var(--s-font);
    font-size: 16px;
    line-height: 1.55;
    display: flex;
    flex-direction: column;
}

a { color: var(--s-accent); }

/* ---------------------------------------------------------------- layout */

.s-header {
    border-bottom: 1px solid var(--s-line);
    background: var(--s-surface);
    padding: .9rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.s-brand {
    font-family: var(--s-font-head);
    font-size: 1.15rem;
    letter-spacing: .02em;
    text-decoration: none;
    color: var(--s-ink);
}
.s-brand span { color: var(--s-accent); }

.s-main {
    flex: 1;
    width: 100%;
    max-width: 34rem;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
}

.s-card {
    background: var(--s-surface);
    border: 1px solid var(--s-line);
    border-radius: var(--s-radius);
    box-shadow: var(--s-shadow);
    padding: 1.75rem;
}

.s-card h1 {
    font-family: var(--s-font-head);
    font-size: 1.5rem;
    margin: 0 0 .35rem;
}

.s-sub {
    color: var(--s-ink-soft);
    font-size: .93rem;
    margin: 0 0 1.5rem;
}

.s-footer {
    border-top: 1px solid var(--s-line);
    color: var(--s-ink-soft);
    font-size: .82rem;
    padding: 1.25rem;
    text-align: center;
}

/* ----------------------------------------------------------------- forms */

.s-field { margin-bottom: 1.15rem; }

.s-field label {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: .3rem;
}

.s-hint {
    display: block;
    color: var(--s-ink-soft);
    font-size: .82rem;
    font-weight: 400;
    margin-top: .15rem;
}

.s-field input {
    width: 100%;
    padding: .65rem .75rem;
    font: inherit;
    color: var(--s-ink);
    background: var(--s-bg);
    border: 1px solid var(--s-line);
    border-radius: 7px;
}

.s-field input:focus {
    outline: 2px solid var(--s-accent);
    outline-offset: 1px;
    border-color: var(--s-accent);
}

.s-field input[aria-invalid="true"] {
    border-color: var(--s-danger);
}

.s-field input[data-no-paste="true"] {
    /* A quiet visual cue that this one is different. */
    background-image: repeating-linear-gradient(
        45deg, transparent, transparent 9px,
        rgba(201, 138, 43, .07) 9px, rgba(201, 138, 43, .07) 18px);
}

.s-error {
    color: var(--s-danger);
    font-size: .84rem;
    margin-top: .3rem;
    min-height: 1.1em;
}

/* ---------------------------------------------------------------- button */

.s-btn {
    width: 100%;
    padding: .75rem 1rem;
    font: inherit;
    font-weight: 600;
    color: var(--s-accent-ink);
    background: var(--s-accent);
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}
.s-btn:hover { filter: brightness(1.07); }
.s-btn:disabled { opacity: .55; cursor: not-allowed; filter: none; }

.s-btn-quiet {
    background: transparent;
    color: var(--s-accent);
    border: 1px solid var(--s-line);
}

.s-alt {
    margin-top: 1.35rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--s-line);
    text-align: center;
    font-size: .9rem;
    color: var(--s-ink-soft);
}

/* --------------------------------------------------------------- notices */

.s-notice {
    border-radius: 7px;
    padding: .7rem .85rem;
    font-size: .88rem;
    margin-bottom: 1.15rem;
    border: 1px solid;
}
.s-notice[hidden] { display: none; }

.s-notice.is-error { color: var(--s-danger); border-color: var(--s-danger); background: rgba(162, 55, 47, .07); }
.s-notice.is-ok    { color: var(--s-ok);     border-color: var(--s-ok);     background: rgba(63, 125, 69, .07); }
.s-notice.is-warn  { color: var(--s-amber);  border-color: var(--s-amber);  background: rgba(201, 138, 43, .09); }

/* --------------------------------------------------- password checklist */

.s-rules {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    font-size: .84rem;
    color: var(--s-ink-soft);
}
.s-rules li { padding-left: 1.35rem; position: relative; }
.s-rules li::before {
    content: '\2022';
    position: absolute;
    left: .35rem;
}
.s-rules li.passed { color: var(--s-ok); }
.s-rules li.passed::before { content: '\2713'; left: .25rem; }

/* Screen reader only. */
.s-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}