/*
 * On-call card website module (W4-02). Used on a phone, at night, by someone who was just woken up: one column, big
 * type, full-width buttons with 48px targets, and a true dark surface (UX design section 8: night legibility is a
 * first-class requirement, 4.5:1 for body text, no opacity-based hierarchy).
 *
 * The card is dark whatever the site's theme is, so it carries its own palette in --oc-* and marks itself
 * data-surface="dark". Every rule is anchored on .scm-mod-OnCallCard: this file is in the website stylesheet union, so
 * it loads on every public page.
 */

.scm-mod-OnCallCard {
    --oc-bg: #0e1116;
    --oc-panel: #171c24;
    --oc-line: #2c3440;
    --oc-ink: #f3f5f8;
    --oc-ink-soft: #b6c0cc;
    --oc-accent: #4da3ff;
    --oc-accent-ink: #06121f;
    --oc-ok: #5fd38d;
    --oc-warn: #ffc857;
    --oc-bad: #ff8a80;
    --oc-bad-fill: #c62828;
}

.scm-mod-OnCallCard .oc-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 30rem;
    margin: 0 auto;
    padding: 1rem;
    border-radius: 14px;
    background: var(--oc-bg);
    color: var(--oc-ink);
    font-size: 1rem;
    line-height: 1.4;
}

.scm-mod-OnCallCard .oc-header { text-align: left; }

.scm-mod-OnCallCard .oc-eyebrow,
.scm-mod-OnCallCard .oc-section {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--oc-ink-soft);
}

.scm-mod-OnCallCard .oc-name {
    margin: 0.15rem 0 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--oc-ink);
}

.scm-mod-OnCallCard .oc-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--oc-ink);
}

.scm-mod-OnCallCard .oc-muted {
    margin: 0.15rem 0 0;
    color: var(--oc-ink-soft);
}

.scm-mod-OnCallCard .oc-fact {
    margin: 0.25rem 0 0;
    font-size: 1.05rem;
    color: var(--oc-ink);
}

.scm-mod-OnCallCard .oc-ok { color: var(--oc-ok); }
.scm-mod-OnCallCard .oc-warn { color: var(--oc-warn); }

.scm-mod-OnCallCard .oc-incident,
.scm-mod-OnCallCard .oc-panel,
.scm-mod-OnCallCard .oc-refusal,
.scm-mod-OnCallCard .oc-thread {
    border: 1px solid var(--oc-line);
    border-radius: 12px;
    padding: 0.85rem;
    background: var(--oc-panel);
}

.scm-mod-OnCallCard .oc-dots {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.scm-mod-OnCallCard .oc-dot {
    display: grid;
    grid-template-columns: 0.9rem auto;
    column-gap: 0.5rem;
    align-items: center;
}

.scm-mod-OnCallCard .oc-dot-mark {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: var(--oc-ink-soft);
}

.scm-mod-OnCallCard .oc-dot[data-state="ok"] .oc-dot-mark { background: var(--oc-ok); }
.scm-mod-OnCallCard .oc-dot[data-state="warn"] .oc-dot-mark { background: var(--oc-warn); }
.scm-mod-OnCallCard .oc-dot[data-state="fail"] .oc-dot-mark { background: var(--oc-bad); }

.scm-mod-OnCallCard .oc-dot-reason {
    grid-column: 2;
    font-size: 0.9rem;
    color: var(--oc-ink-soft);
}

.scm-mod-OnCallCard .oc-thread {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.scm-mod-OnCallCard .oc-message {
    margin: 0;
    overflow-wrap: anywhere;
}

.scm-mod-OnCallCard .oc-message-meta {
    display: block;
    font-size: 0.8rem;
    color: var(--oc-ink-soft);
}

.scm-mod-OnCallCard .oc-actions,
.scm-mod-OnCallCard .oc-panel,
.scm-mod-OnCallCard .oc-incidents {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.scm-mod-OnCallCard .oc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 0.6rem 1rem;
    border: 1px solid var(--oc-line);
    border-radius: 12px;
    background: var(--oc-panel);
    color: var(--oc-ink);
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.scm-mod-OnCallCard .oc-btn-primary {
    border-color: var(--oc-accent);
    background: var(--oc-accent);
    color: var(--oc-accent-ink);
}

.scm-mod-OnCallCard .oc-btn-danger {
    border-color: var(--oc-bad-fill);
    background: var(--oc-bad-fill);
    color: #ffffff;
}

.scm-mod-OnCallCard .oc-btn-quiet {
    background: transparent;
    color: var(--oc-ink-soft);
}

.scm-mod-OnCallCard .oc-btn:disabled {
    border-style: dashed;
    cursor: progress;
}

.scm-mod-OnCallCard .oc-btn:focus-visible,
.scm-mod-OnCallCard .oc-input:focus-visible,
.scm-mod-OnCallCard .oc-incident-row:focus-visible {
    outline: 3px solid var(--oc-warn);
    outline-offset: 2px;
}

.scm-mod-OnCallCard .oc-label {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--oc-ink-soft);
}

.scm-mod-OnCallCard .oc-input {
    width: 100%;
    min-height: 48px;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--oc-line);
    border-radius: 10px;
    background: var(--oc-bg);
    color: var(--oc-ink);
    font-size: 1.1rem;
}

.scm-mod-OnCallCard .oc-refusal { border-color: var(--oc-bad); }
.scm-mod-OnCallCard .oc-refusal p { margin: 0 0 0.35rem; }
.scm-mod-OnCallCard .oc-refusal-what { font-weight: 700; color: var(--oc-ink); }
.scm-mod-OnCallCard .oc-refusal-remedy { color: var(--oc-ink); }
.scm-mod-OnCallCard .oc-refusal-reach { color: var(--oc-ink-soft); }

.scm-mod-OnCallCard .oc-done {
    margin: 0;
    padding: 0.85rem;
    border: 1px solid var(--oc-ok);
    border-radius: 12px;
    background: var(--oc-panel);
    color: var(--oc-ok);
    font-weight: 700;
}

.scm-mod-OnCallCard .oc-incident-row {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    min-height: 52px;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--oc-line);
    border-radius: 12px;
    background: var(--oc-panel);
    color: var(--oc-ink);
    text-align: left;
    cursor: pointer;
}

.scm-mod-OnCallCard .oc-incident-row[data-selected="true"] { border-color: var(--oc-accent); }
.scm-mod-OnCallCard .oc-incident-when { font-size: 0.85rem; color: var(--oc-ink-soft); }
.scm-mod-OnCallCard .oc-incident-text { overflow-wrap: anywhere; }

/* The footer sits outside the card, on whatever the site's theme is, so it carries the card's own dark surface: the
   live marker and the quiet button read the same on a light site as on a dark one. */
.scm-mod-OnCallCard .oc-footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 30rem;
    margin: 0.5rem auto 0;
    padding: 0.75rem 1rem;
    border-radius: 14px;
    background: var(--oc-bg);
}

.scm-mod-OnCallCard .oc-live {
    margin: 0;
    font-size: 0.9rem;
    text-align: center;
    color: var(--oc-ink-soft);
}

.scm-mod-OnCallCard .oc-live[data-refresh-failed="true"] {
    font-weight: 700;
    color: var(--oc-warn);
}

.scm-mod-OnCallCard a.oc-btn:hover,
.scm-mod-OnCallCard a.oc-btn:focus { color: var(--oc-accent-ink); text-decoration: none; }

@media (max-width: 420px) {
    .scm-mod-OnCallCard .oc-card { padding: 0.75rem; border-radius: 0; }
    .scm-mod-OnCallCard .oc-title { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
    .scm-mod-OnCallCard * { transition: none; animation: none; }
}