/* Arcmailer — dev-infra brand. Monospace headings, narrow column, terminal accent. */
/* Design review: Mira Dubois-Tanaka. Brief: snap to a 4 px grid, optical-align the
   monospace headlines, give the focus state real presence, kill the !important. */

:root[data-site="arcmailer"] {
    --am-bg: #0b0f14;
    --am-fg: #e6edf3;
    --am-muted: #8b949e;
    --am-accent: #10b981;
    --am-accent-ink: #04140e;
    --am-border: #1f2937;
    --am-card: #111821;
    --am-radius: 4px;
    /* 4 px subgrid — every padding/margin is a multiple. */
    --am-s1: 4px; --am-s2: 8px; --am-s3: 12px; --am-s4: 16px;
    --am-s5: 24px; --am-s6: 32px; --am-s7: 48px; --am-s8: 64px;
    --am-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --am-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, system-ui, sans-serif;
}

html[data-site="arcmailer"], body { background: var(--am-bg); color: var(--am-fg); }
body {
    font-family: var(--am-sans);
    line-height: 1.6;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Mira: SF Mono at display size needs negative tracking — the default looks loose. */
h1, h2, h3, .am-brand, .am-prompt, code { font-family: var(--am-mono); }
h1 { font-size: 2.4rem; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--am-s4); }
h2 { font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 var(--am-s2); color: var(--am-fg); }
h3 { font-size: 1rem; line-height: 1.3; margin: 0 0 var(--am-s2); }
.am-accent { color: var(--am-accent); }
.am-prompt { color: var(--am-accent); margin-right: var(--am-s1); }

.am-container { max-width: 720px; margin: 0 auto; padding: 0 var(--am-s5); }

/* Header — Mira: the blur is justified only if the hairline shifts on scroll. */
.am-header {
    border-bottom: 1px solid var(--am-border);
    padding: var(--am-s4) 0;
    position: sticky; top: 0; background: rgba(11,15,20,.85);
    backdrop-filter: blur(6px);
}
.am-header .am-container { display: flex; justify-content: space-between; align-items: center; }
.am-brand { color: var(--am-fg); text-decoration: none; font-size: 1.05rem; }
.am-nav a {
    color: var(--am-muted); text-decoration: none;
    margin-left: var(--am-s5); font-size: .9rem;
    transition: color .12s ease;
}
.am-nav a:hover { color: var(--am-fg); }

.am-cta {
    background: var(--am-accent); color: var(--am-accent-ink) !important;
    padding: var(--am-s2) var(--am-s3); border-radius: var(--am-radius);
    font-weight: 600;
}

/* Main */
.am-main { padding: var(--am-s7) 0 var(--am-s8); }
.am-hero p.am-lede {
    color: var(--am-muted); max-width: 56ch; font-size: 1.05rem;
    /* Optical alignment: hanging punctuation is the closest browsers will get. */
    hanging-punctuation: first last;
}
.am-actions { margin-top: var(--am-s5); display: flex; gap: var(--am-s3); }

.am-btn {
    display: inline-block; padding: var(--am-s3) var(--am-s4);
    border-radius: var(--am-radius); border: 1px solid var(--am-border);
    text-decoration: none; font-family: var(--am-mono); font-size: .95rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
}
.am-btn-primary { background: var(--am-accent); color: var(--am-accent-ink); border-color: var(--am-accent); }
.am-btn-primary:hover { filter: brightness(1.08); }
.am-btn-primary:active { transform: translateY(1px); }
.am-btn-ghost { color: var(--am-fg); }
.am-btn-ghost:hover { border-color: var(--am-accent); color: var(--am-accent); }

/* Mira: a real focus ring. 2 px, offset, brand accent, no apology. */
.am-btn:focus-visible,
.am-form input:focus-visible,
.am-form button:focus-visible,
.am-nav a:focus-visible,
.am-brand:focus-visible {
    outline: 2px solid var(--am-accent);
    outline-offset: 2px;
}

.am-features {
    display: grid; gap: var(--am-s4);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: var(--am-s8);
}
.am-features article {
    background: var(--am-card); border: 1px solid var(--am-border);
    padding: var(--am-s4) var(--am-s5); border-radius: var(--am-radius);
}
.am-features p { color: var(--am-muted); margin: var(--am-s1) 0 0; font-size: .95rem; }

/* Auth */
.am-auth { max-width: 420px; margin: 0 auto; }
.am-form label { display: block; margin: var(--am-s4) 0; }
.am-form label > span {
    display: block; color: var(--am-muted); font-family: var(--am-mono);
    font-size: .85rem; margin-bottom: var(--am-s1);
    text-transform: lowercase;
}
.am-form input[type="text"], .am-form input[type="email"], .am-form input[type="password"], .am-form input:not([type]) {
    width: 100%; padding: var(--am-s2) var(--am-s3);
    border-radius: var(--am-radius);
    background: #0b1218; color: var(--am-fg); border: 1px solid var(--am-border);
    font-family: var(--am-mono);
    transition: border-color .12s ease;
}
.am-form input:hover { border-color: #2c3a4e; }
.am-form button { width: 100%; margin-top: var(--am-s2); }

/* Mira: refactor the cascade so we don't need !important. .am-checkbox wins by being more specific. */
.am-form label.am-checkbox { display: flex; align-items: center; gap: var(--am-s2); margin: var(--am-s2) 0; }
.am-form label.am-checkbox > span { margin: 0; text-transform: none; }

.am-errors { color: #ef4444; margin: var(--am-s2) 0; }
.am-auth-footer { margin-top: var(--am-s5); color: var(--am-muted); }
.am-auth-footer a { color: var(--am-accent); text-decoration: underline; text-underline-offset: 2px; }

/* Blog */
.am-blog h1 { margin-bottom: var(--am-s6); }
.am-post-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--am-s4); }
.am-post-card {
    background: var(--am-card); border: 1px solid var(--am-border);
    padding: var(--am-s4) var(--am-s5); border-radius: var(--am-radius);
}
.am-post-card h2 a { color: var(--am-fg); text-decoration: none; }
.am-post-card h2 a:hover { color: var(--am-accent); }
.am-post-card time {
    color: var(--am-muted); font-family: var(--am-mono); font-size: .85rem;
    font-variant-numeric: tabular-nums;
}
.am-empty { color: var(--am-muted); font-family: var(--am-mono); }

/* Selection — small thing, big delight. */
::selection { background: rgba(16, 185, 129, .35); color: var(--am-fg); }

/* Footer */
.am-footer {
    border-top: 1px solid var(--am-border);
    padding: var(--am-s6) 0 var(--am-s7);
    margin-top: var(--am-s8);
    color: var(--am-muted); font-size: .9rem;
}
.am-footer-meta {
    display: flex; flex-wrap: wrap; gap: var(--am-s4);
    align-items: center; justify-content: space-between;
    margin-top: var(--am-s4);
}
.am-footer a, .am-footer .parent-wordmark { color: var(--am-muted); }
.am-footer a:hover, .am-footer .parent-wordmark:hover { color: var(--am-accent); }

/* Skip-to-content (Mira insists). */
.skip-to-content {
    position: absolute; left: -9999px;
    background: var(--am-accent); color: var(--am-accent-ink);
    padding: var(--am-s2) var(--am-s3); border-radius: var(--am-radius);
    font-family: var(--am-mono); font-weight: 600; z-index: 1000;
}
.skip-to-content:focus { left: var(--am-s4); top: var(--am-s4); }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}