/* Cron Alerts — observability dashboard look. Slate background, amber alert accent,
   tabular numerals, status pills. Personas 9 + 10 (SRE + compliance). */
/* Design review: Kris Voorhees. Brief: cull duplicate indicators, unify the dot system,
   tabular numerals at cell level, scrollable wrappers, treat status pills as status. */

:root[data-site="cronalerts"] {
    --ca-bg: #0f172a;
    --ca-surface: #1e293b;
    --ca-fg: #e2e8f0;
    --ca-muted: #94a3b8;
    --ca-accent: #f59e0b;
    --ca-ok: #22c55e;
    --ca-warn: #f97316;
    --ca-bad: #ef4444;
    --ca-rule: #334155;
    --ca-mono: ui-monospace, "JetBrains Mono", "Roboto Mono", monospace;
    --ca-sans: "Inter", -apple-system, system-ui, sans-serif;
    /* Single dot system. Everything that's a status indicator is exactly this size. */
    --ca-dot: 8px;
}
html[data-site="cronalerts"], body { background: var(--ca-bg); color: var(--ca-fg); }
body {
    font-family: var(--ca-sans); margin: 0; line-height: 1.55;
    font-feature-settings: "tnum", "cv11", "ss01";
}

.ca-container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

.ca-header { background: var(--ca-surface); border-bottom: 1px solid var(--ca-rule); padding: .85rem 0; }
.ca-header .ca-container { display: flex; gap: 1.5rem; align-items: center; }
.ca-brand {
    display: inline-flex; align-items: center; gap: .55rem;
    color: var(--ca-fg); text-decoration: none;
    font-family: var(--ca-mono); letter-spacing: .04em;
}
/* Kris: one indicator. The brand pulse IS the status. Drop the duplicate .ca-status block. */
.ca-brand-pulse {
    width: var(--ca-dot); height: var(--ca-dot); border-radius: 50%;
    background: var(--ca-ok); box-shadow: 0 0 8px var(--ca-ok);
    animation: ca-pulse 2s ease-in-out infinite;
}
@keyframes ca-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
    .ca-brand-pulse { animation: none; }
}

.ca-brand-state { color: var(--ca-muted); font-size: .85rem; margin-left: .15rem; }
.ca-nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.ca-nav a {
    color: var(--ca-muted); text-decoration: none;
    padding: .4rem .75rem; border-radius: 6px;
    font-size: .9rem;
    transition: color .12s ease, background-color .12s ease;
}
.ca-nav a:hover { color: var(--ca-fg); }
.ca-nav a:focus-visible { outline: 2px solid var(--ca-accent); outline-offset: 2px; }

.ca-cta {
    background: var(--ca-accent); color: #1a1100 !important;
    padding: .45rem 1rem; border-radius: 6px; font-weight: 600;
}
.ca-cta:hover { filter: brightness(1.08); color: #1a1100; }

.ca-main { padding: 0; }
.ca-hero { padding: 4rem 0 3rem; }
.ca-eyebrow {
    color: var(--ca-accent); font-family: var(--ca-mono);
    font-size: .8rem; letter-spacing: .15em; text-transform: uppercase;
    margin: 0 0 1rem;
}
h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 1rem; line-height: 1.08; letter-spacing: -.015em; }
.ca-accent { color: var(--ca-accent); }
.ca-lede { color: var(--ca-muted); font-size: 1.05rem; max-width: 60ch; }

.ca-actions { display: flex; gap: .75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.ca-btn {
    display: inline-block; padding: .7rem 1.3rem;
    border-radius: 6px; text-decoration: none; font-weight: 600;
    border: 1px solid transparent;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease, transform .08s ease;
}
.ca-btn-primary { background: var(--ca-accent); color: #1a1100; border-color: var(--ca-accent); }
.ca-btn-primary:hover { filter: brightness(1.08); }
.ca-btn-primary:active { transform: translateY(1px); }
.ca-btn-ghost { color: var(--ca-fg); border-color: var(--ca-rule); }
.ca-btn-ghost:hover { border-color: var(--ca-accent); color: var(--ca-accent); }
.ca-btn:focus-visible { outline: 2px solid var(--ca-accent); outline-offset: 3px; }

.ca-board { padding: 2rem 0 5rem; }
.ca-board h2 { font-size: 1.25rem; margin: 0 0 1rem; letter-spacing: -.005em; }

/* Kris: scrollable wrapper so border-radius + overflow doesn't fight the scrollbar on narrow viewports. */
.ca-table-wrap {
    border: 1px solid var(--ca-rule); border-radius: 8px;
    background: var(--ca-surface);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ca-table { width: 100%; border-collapse: collapse; }
.ca-table th, .ca-table td {
    padding: .75rem 1rem; text-align: left;
    font-family: var(--ca-mono); font-size: .9rem;
    /* tabular-nums on the cells so the column stays aligned no matter the scaling. */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ca-table th {
    background: rgba(255,255,255,.03); color: var(--ca-muted); font-weight: 500;
    border-bottom: 1px solid var(--ca-rule);
    text-transform: uppercase; letter-spacing: .08em; font-size: .75rem;
}
.ca-table tr + tr td { border-top: 1px solid var(--ca-rule); }
.ca-table tr:hover td { background: rgba(245,158,11,.04); }
/* Kris: numeric columns right-align. Always. */
.ca-table .ca-num { text-align: right; }

.ca-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .15rem .55rem; border-radius: 4px;
    font-size: .7rem; letter-spacing: .08em;
    text-transform: uppercase; font-weight: 600;
}
.ca-pill::before {
    content: "";
    width: var(--ca-dot); height: var(--ca-dot);
    border-radius: 50%; background: currentColor;
}
.ca-pill-ok   { background: rgba(34,197,94,.15); color: var(--ca-ok); }
.ca-pill-warn { background: rgba(249,115,22,.15); color: var(--ca-warn); }
.ca-pill-bad  { background: rgba(239,68,68,.15); color: var(--ca-bad); }

.ca-table-foot {
    color: var(--ca-muted); font-family: var(--ca-mono);
    font-size: .8rem; margin-top: .75rem;
    font-variant-numeric: tabular-nums;
}

::selection { background: rgba(245,158,11,.35); color: var(--ca-fg); }

.ca-footer { border-top: 1px solid var(--ca-rule); padding: 2rem 0; color: var(--ca-muted); font-size: .9rem; }
.ca-footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.ca-footer a { color: var(--ca-muted); text-decoration: none; }
.ca-footer a:hover { color: var(--ca-accent); }

.skip-to-content {
    position: absolute; left: -9999px;
    background: var(--ca-accent); color: #1a1100;
    padding: .5rem .8rem; border-radius: 6px; font-weight: 700; z-index: 1000;
}
.skip-to-content:focus { left: 1rem; top: 1rem; }

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