/**
 * FORM Auth pages — bulletin / data-journalism aesthetic
 * Pairs with css/spending-ledger.css and shares its type+color system.
 *
 * Used by: auth/login.html, auth/reset.html, auth/settings.html
 *
 * Design system:
 *   Display:  Fraunces (serif, opsz axis)        — names, headlines
 *   Mono:     JetBrains Mono                      — labels, metadata, numerics
 *   Paper:    #fbf9f4 warm cream
 *   Ink:      #1a1a1a
 *   Navy:     #1a2a3a (rule color)
 *   Accent:   #b91c1c (focus, links, declines)
 *   Mark:     #d4a017 (status dot, NEW pills)
 *
 * Inline styles are avoided to comply with CSP nonce policy. All visual
 * design lives in this stylesheet.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    --paper: #fbf9f4;
    --paper-edge: #ece8de;
    --paper-white: #ffffff;
    --ink: #1a1a1a;
    --ink-soft: #555555;
    --ink-mute: #8a8580;
    --navy: #1a2a3a;
    --rule: #1a2a3a;
    --accent: #b91c1c;
    --mark: #d4a017;
    --gain: #2e7d32;
}

/* Reset Tailwind body defaults from the page */
body.bulletin {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    min-height: 100vh;
    font-family: 'Fraunces', Georgia, serif;
    font-feature-settings: "kern", "liga", "onum";
    line-height: 1.5;
    /* faint baseline grid texture */
    background-image: linear-gradient(transparent 31px, rgba(26, 42, 58, 0.04) 32px);
    background-size: 100% 32px;
    display: flex;
    flex-direction: column;
}

body.bulletin a { color: var(--accent); }

/* MASTHEAD */
.bulletin-masthead {
    border-top: 4px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 16px 32px 12px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    background: var(--paper);
    flex-wrap: wrap;
    gap: 8px;
}
.bulletin-masthead-left {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.01em;
}
.bulletin-masthead-left strong { color: var(--ink); }
.bulletin-masthead-left em {
    font-style: italic;
    font-weight: 400;
    color: var(--ink-soft);
}
.bulletin-masthead-right {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-mute);
}

/* MAIN — two columns on desktop, stacked on mobile */
.bulletin-main {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    border-bottom: 1px solid var(--paper-edge);
}

/* LEFT: editorial column */
.bulletin-editorial {
    padding: 56px 48px 56px 32px;
    border-right: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--paper);
}
.bulletin-kicker {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent);
    margin: 0 0 16px;
}
.bulletin-lede {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
    color: var(--ink);
    font-variation-settings: "opsz" 96;
}
.bulletin-lede em {
    font-style: italic;
    font-weight: 500;
    color: var(--navy);
}
.bulletin-standfirst {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0 0 28px;
    max-width: 38ch;
}
.bulletin-byline {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-mute);
    border-top: 1px solid var(--paper-edge);
    padding-top: 14px;
    max-width: 38ch;
}

/* RIGHT: form column */
.bulletin-auth {
    padding: 56px 32px 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--paper-white);
    position: relative;
}
.bulletin-tag {
    position: absolute;
    top: 24px;
    right: 32px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-mute);
}
.bulletin-tag::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--mark);
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 8px;
}
.bulletin-auth h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 28px;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
    color: var(--ink);
}
.bulletin-auth-sub {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    color: var(--ink-soft);
    margin-bottom: 36px;
}

/* ERROR MESSAGE */
.bulletin-error {
    margin: 0 0 24px;
    padding: 12px 16px;
    border-left: 3px solid var(--accent);
    background: rgba(185, 28, 28, 0.06);
    font-family: 'Fraunces', Georgia, serif;
    font-size: 14px;
    color: var(--accent);
}
.bulletin-error.hidden { display: none; }

/* Generic hidden utility — used by js/login.js to toggle eye icons + error visibility */
body.bulletin .hidden { display: none !important; }

/* FIELD */
.bulletin-field {
    margin-bottom: 24px;
}
.bulletin-field label {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-mute);
    margin-bottom: 6px;
}
.bulletin-field label .num {
    color: var(--navy);
    font-weight: 600;
    margin-right: 8px;
}
.bulletin-field input[type="text"],
.bulletin-field input[type="password"] {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-bottom: 1.5px solid var(--rule);
    background: transparent;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 17px;
    color: var(--ink);
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.bulletin-field input[type="text"]::placeholder,
.bulletin-field input[type="password"]::placeholder {
    color: var(--ink-mute);
    font-style: italic;
    opacity: 1;
}
.bulletin-field input[type="text"]:focus,
.bulletin-field input[type="password"]:focus {
    border-bottom-color: var(--accent);
}

/* PASSWORD field with show/hide toggle */
.bulletin-password-wrap {
    position: relative;
}
.bulletin-password-wrap input[type="password"],
.bulletin-password-wrap input[type="text"] {
    padding-right: 44px;
}
#toggle-password {
    position: absolute;
    right: 0;
    bottom: 8px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: var(--ink-mute);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}
#toggle-password:hover { color: var(--accent); }
#toggle-password svg { width: 18px; height: 18px; }

/* CHECKBOX */
.bulletin-row {
    display: flex;
    align-items: center;
    margin: 28px 0;
}
.bulletin-row label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
    cursor: pointer;
    user-select: none;
}
.bulletin-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--rule);
    margin-right: 10px;
    cursor: pointer;
    position: relative;
    background: transparent;
    flex-shrink: 0;
}
.bulletin-row input[type="checkbox"]:checked::after {
    content: '×';
    position: absolute;
    inset: -3px 0 0 1px;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--accent);
    line-height: 1;
}

/* VERIFICATION */
.bulletin-verify {
    margin: 28px 0 32px;
    padding-top: 18px;
    border-top: 1px dotted var(--paper-edge);
}
.bulletin-verify-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-mute);
    margin-bottom: 12px;
}
.bulletin-verify-label .num {
    color: var(--navy);
    font-weight: 600;
    margin-right: 8px;
}
#turnstile-widget {
    /* Cloudflare's widget renders here; let it size itself */
    min-height: 65px;
}

/* SUBMIT — outline button, not filled */
.bulletin-submit {
    width: 100%;
    padding: 16px 0;
    border: 1.5px solid var(--rule);
    background: transparent;
    color: var(--navy);
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, transform 0.06s;
    box-sizing: border-box;
}
.bulletin-submit:hover {
    background: var(--rule);
    color: var(--paper);
}
.bulletin-submit:active { transform: translateY(1px); }
.bulletin-submit::after {
    content: ' \2192';                   /* → */
    transition: margin-left 0.18s;
    display: inline-block;
}
.bulletin-submit:hover::after { margin-left: 6px; }

/* HELP */
.bulletin-help {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--paper-edge);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-mute);
}
.bulletin-help a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px dotted var(--accent);
}
.bulletin-help a:hover { background: rgba(185, 28, 28, 0.08); }

/* FOOTER */
.bulletin-footer {
    padding: 16px 32px;
    border-top: 1px solid var(--rule);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-mute);
    background: var(--paper);
}
.bulletin-footer em {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-soft);
    font-size: 12px;
}

/* Stack on narrow screens */
@media (max-width: 720px) {
    .bulletin-main { grid-template-columns: 1fr; }
    .bulletin-editorial {
        border-right: none;
        border-bottom: 1px solid var(--rule);
        padding: 32px;
    }
    .bulletin-auth { padding: 32px; }
    .bulletin-lede { font-size: 32px; }
}