/* ==========================================================================
   COMPONENT — Dialog + toasts + read-only report banner + share sheet
   The dialog markup is produced by ui/modal.js and is the only modal shell in
   the app; nothing else builds its own overlay.
   ========================================================================== */

.sc-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: var(--surface-scrim);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    overflow-y: auto;
}

.sc-modal-card {
    background: var(--surface-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    width: min(560px, 100%);
    max-height: calc(100vh - 2.5rem);
    display: flex;
    flex-direction: column;
}

.sc-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--border-subtle);
}
.sc-modal-head h2 {
    margin: 0;
    font-size: var(--text-xl);
    color: var(--text-strong);
}

.sc-modal-x {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-tertiary);
    font-size: 1.05rem;
    cursor: pointer;
    line-height: 1;
    min-width: var(--hit-min);
    min-height: var(--hit-min);
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-sm);
}
.sc-modal-x:hover { color: var(--text-primary); background: var(--surface-3); }

.sc-modal-body { padding: 1.15rem; overflow-y: auto; }
.sc-modal-foot {
    padding: 0.85rem 1.15rem;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

/* The dialog locks the page behind it; without this the background scrolls
   under the overlay on wheel/touch. */
body.sc-modal-open { overflow: hidden; }

/* ---- Toasts ------------------------------------------------------------ */
#sc-toasts {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: min(360px, calc(100vw - 40px));
}

.sc-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    background: var(--surface-3);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    font-size: var(--text-sm);
    line-height: var(--lh-snug);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    animation: sc-slide-in var(--duration-base) var(--ease-out);
}
/* Left rule + glyph, so the toast type survives greyscale. */
.sc-toast::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    flex-shrink: 0;
    margin-top: 0.1em;
}
.sc-toast-info    { border-left: 3px solid var(--accent-fg); }
.sc-toast-info::before    { content: '\f05a'; color: var(--accent-fg); }
.sc-toast-success { border-left: 3px solid var(--success-fg); }
.sc-toast-success::before { content: '\f058'; color: var(--success-fg); }
.sc-toast-warning { border-left: 3px solid var(--warning-fg); }
.sc-toast-warning::before { content: '\f071'; color: var(--warning-fg); }
.sc-toast-error   { border-left: 3px solid var(--error-fg); }
.sc-toast-error::before   { content: '\f06a'; color: var(--error-fg); }

.sc-toast.out { animation: sc-slide-out var(--duration-base) var(--ease-out) forwards; }

@keyframes sc-slide-in  { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes sc-slide-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(110%); opacity: 0; } }

@media (max-width: 640px) {
    #sc-toasts { left: 12px; right: 12px; top: 12px; max-width: none; }
}

/* ---- Share sheet ------------------------------------------------------- */
.share-lead {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
    white-space: pre-line;
    margin-bottom: 1rem;
}
.share-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    margin-bottom: 1.1rem;
}
.share-net {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--hit-min);
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: border-color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}
.share-net:hover {
    border-color: var(--accent-fg);
    background: var(--accent-bg);
    color: var(--text-primary);
}
.share-net i { width: 18px; text-align: center; color: var(--accent-fg); }

.share-copy { display: flex; gap: 0.5rem; }
.share-copy input {
    flex: 1;
    min-width: 0;
    min-height: var(--hit-min);
    padding: 0.6rem 0.75rem;
    background: var(--surface-input);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
}

.share-permalink { width: 100%; justify-content: center; margin-bottom: 1.1rem; }
.share-permalink-note {
    font-size: var(--text-sm);
    color: var(--success-fg);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ---- History ----------------------------------------------------------- */
.verdict-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    flex-shrink: 0;
    margin-right: 0.5rem;
    font-size: 0.72rem;
    color: var(--verdict-insufficient-fg);
}
.verdict-dot.v-supported   { color: var(--verdict-supported-fg); }
.verdict-dot.v-disputed    { color: var(--verdict-disputed-fg); }
.verdict-dot.v-unsupported { color: var(--verdict-unsupported-fg); }

.hist-item { padding: 0.75rem 0; border-bottom: 1px solid var(--border-subtle); }
.hist-item:last-child { border-bottom: none; }
.hist-meta { font-size: var(--text-2xs); color: var(--text-muted); margin-bottom: 0.4rem; }
.hist-claim {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.25rem;
}

/* ---- Read-only shared report banner ------------------------------------
   A stranger's first contact with the product: they followed a link to
   somebody else's report. It has to say what they are looking at and offer
   the obvious next step as a control, not a 21px-tall inline link. */
.readonly-banner {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.9rem;
    margin-bottom: 1.25rem;
}
.readonly-banner i { color: var(--accent-fg); }
.readonly-banner .btn-link { margin-left: auto; }