/* Details Page Specific Styles */

.error {
    padding: var(--spectrum-spacing-400) var(--spectrum-spacing-500);
    color: var(--spectrum-red-700);
    background: rgb(227 72 80 / 10%);
    border-radius: var(--spectrum-border-radius-200);
    border: 1px solid rgb(227 72 80 / 20%);
}

/* Details page spacing */
#incident-container .incident {
    padding: var(--spectrum-spacing-600);
}

#incident-container .incident .meta {
    display: block;
    margin: var(--spectrum-spacing-100) 0 var(--spectrum-spacing-300);
}

#incident-container .updates .u {
    padding: var(--spectrum-spacing-300) 0;
    margin: 0;
    border-bottom: 1px solid var(--spectrum-gray-100);
}

#incident-container .updates .u:last-child {
    border-bottom: none;
}

#incident-container time {
    font-style: italic;
    color: var(--spectrum-gray-600);
    font-size: var(--spectrum-font-size-small);
}

#incident-container .updates time {
    margin-bottom: var(--spectrum-spacing-200);
}


/* Markdown content inside updates */
#incident-container .updates h2 {
    font-size: var(--spectrum-font-size-xlarge);
    margin: var(--spectrum-spacing-600) 0 var(--spectrum-spacing-200);
    color: var(--spectrum-gray-800);
}

#incident-container .updates h3 {
    font-size: var(--spectrum-font-size-large);
    margin: var(--spectrum-spacing-300) 0 var(--spectrum-spacing-200);
    color: var(--spectrum-gray-800);
}

#incident-container .updates p {
    line-height: 1.5;
    margin: var(--spectrum-spacing-200) 0 0 0;
    color: var(--spectrum-gray-700);
}

#incident-container .updates ul {
    margin: var(--spectrum-spacing-200) 0 0 var(--spectrum-spacing-400);
}

#incident-container .updates li {
    margin: var(--spectrum-spacing-100) 0;
}

#incident-container article {
    padding: var(--spectrum-spacing-400) var(--spectrum-spacing-500);
}

#incident-container ul.updates {
    list-style-type: none;
    padding: var(--spectrum-spacing-400) var(--spectrum-spacing-500);
}

#incident-container ul.updates li {
    border-top: 1px solid var(--spectrum-gray-100);
    padding: var(--spectrum-spacing-400) 0;
}

#incident-container ul.updates h2 {
    margin: 0;
}

#incident-container ul.updates::before {
    content: 'Timeline';
    display: block;
    font-size: var(--spectrum-font-size-xxlarge);
    font-weight: 700;
    margin: 0 0 var(--spectrum-spacing-400) 0;
    color: var(--spectrum-gray-800);
}