@layer legacy {
/* Deep-link / navigation notice banner (#deep-link-error).
 *
 * Populated by client/js/router.js (showError / rejectTarget) and by
 * client/js/toast-navigate.js (announceMissing) through the SAME element
 * and the SAME function - see router.js for why there is only one
 * surface.
 *
 * THIS IS AN INFORMATIONAL NOTICE, NOT AN ERROR. Every message it shows
 * means "you were sent back home" or "that session is no longer
 * running" - neither is an application fault, so it borrows the calm
 * info tokens `.auth-info` already uses elsewhere in styles.css, rather
 * than the danger-red tokens a real failure would use. It shipped with
 * inline `background:#c00; color:#fff` - a full-width blood-red alarm
 * bar for a one-line, entirely recoverable notice - which is what made it
 * read as far more urgent than anything it was ever reporting.
 *
 * Kept as its own file rather than folded into styles.css, which is
 * already past this project's line-count guideline (see CLAUDE.md,
 * "How we work here").
 *
 * Themeing: every color below is a token already defined in
 * client/css/styles.css and reused unchanged, so this banner tracks
 * whatever theme (light, dark, or a user theme) is active without any
 * light/dark branching of its own.
 */

#deep-link-error {
    display: none;               /* toggled to 'flex' by router.js */
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    background: var(--oc-ground-raised);
    border-bottom: 1px solid var(--oc-cyan);
    color: var(--oc-text-primary);
    padding: 8px 16px;
    font-size: 0.85rem;
    line-height: 1.4;
    text-align: center;
}

.deep-link-error__text {
    flex: 1 1 auto;
    min-width: 0;
}

.deep-link-error__dismiss {
    flex: 0 0 auto;
    appearance: none;
    background: transparent;
    border: none;
    color: var(--oc-text-secondary);
    font-size: 1.15rem;
    line-height: 1;
    padding: 2px 8px;
    margin: -2px 0;
    cursor: pointer;
    border-radius: var(--oc-radius-sm);
}

.deep-link-error__dismiss:hover {
    color: var(--oc-text-primary);
    background: var(--oc-ground-hover);
}

.deep-link-error__dismiss:focus-visible {
    color: var(--oc-text-primary);
}
}