waddling-errors 0.7.3

/* ============================================
   ERROR CARDS
   Main Card Styling with Collapsible Sections
   ============================================ */

/* === Error Card Container === */
.error-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.error-card:hover {
    border-color: var(--border-light);
    box-shadow: var(--shadow-md);
}

/* Severity border accent (using severity char) */
.error-card.severity-E { border-left: 3px solid var(--sev-error); }
.error-card.severity-W { border-left: 3px solid var(--sev-warning); }
.error-card.severity-C { border-left: 3px solid var(--sev-critical); }
.error-card.severity-B { border-left: 3px solid var(--sev-blocked); }
.error-card.severity-I { border-left: 3px solid var(--sev-info); }
.error-card.severity-H { border-left: 3px solid var(--sev-help); }
.error-card.severity-S { border-left: 3px solid var(--sev-success); }
.error-card.severity-K { border-left: 3px solid var(--sev-completed); }
.error-card.severity-T { border-left: 3px solid var(--sev-trace); }

/* Light mode: full severity-colored border for better visibility */
[data-theme="light"] .error-card.severity-E { border-color: var(--sev-error); }
[data-theme="light"] .error-card.severity-W { border-color: var(--sev-warning); }
[data-theme="light"] .error-card.severity-C { border-color: var(--sev-critical); }
[data-theme="light"] .error-card.severity-B { border-color: var(--sev-blocked); }
[data-theme="light"] .error-card.severity-I { border-color: var(--sev-info); }
[data-theme="light"] .error-card.severity-H { border-color: var(--sev-help); }
[data-theme="light"] .error-card.severity-S { border-color: var(--sev-success); }
[data-theme="light"] .error-card.severity-K { border-color: var(--sev-completed); }
[data-theme="light"] .error-card.severity-T { border-color: var(--sev-trace); }

/* Light mode: more defined inner element borders */
[data-theme="light"] .error-card-body {
    border-top-color: #d1d5db;
}

[data-theme="light"] .error-section {
    border-bottom-color: #d1d5db;
}

[data-theme="light"] .error-section-toggle {
    border-bottom: 1px solid #e5e7eb;
}

[data-theme="light"] .code-snippet {
    border: 1px solid #d1d5db;
}

[data-theme="light"] .code-snippet-header {
    border-bottom-color: #d1d5db;
}

[data-theme="light"] .related-code {
    border: 1px solid #d1d5db;
}

[data-theme="light"] .tag {
    border: 1px solid #d1d5db;
}

[data-theme="light"] .meta-badge {
    border: 1px solid #d1d5db;
}

.error-card.highlight {
    animation: highlightPulse 2s ease-out;
}

@keyframes highlightPulse {
    0% { box-shadow: 0 0 0 3px var(--accent-primary); }
    100% { box-shadow: none; }
}

/* === Card Header === */
.error-card-header {
    padding: 1rem 1.25rem;
}

/* === Error Code Row === */
.error-code-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

/* Severity emoji */
.severity-emoji {
    font-size: 1.125rem;
    line-height: 1;
}

.error-code-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.error-code {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

/* Code part colors */
.part {
    display: inline;
}

/* Clickable code parts */
.part.clickable {
    cursor: pointer;
    border-radius: 3px;
    padding: 0 2px;
    margin: 0 -2px;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.part.clickable:hover {
    background: var(--bg-hover);
    transform: scale(1.05);
}

.dot {
    color: var(--text-muted);
    margin: 0 2px;
}

.part.severity { color: var(--part-severity); }
.part.component { color: var(--part-component); }
.part.primary { color: var(--part-primary); }
.part.sequence { color: var(--part-sequence); }

/* Copy button */
.copy-code-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    font-size: 0.875rem;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.copy-code-btn:hover {
    opacity: 1;
}

/* Arrow */
.error-arrow {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Hash badge */
.error-hash {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: var(--accent-primary);
    color: var(--bg-primary);
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.error-hash:hover {
    background: var(--accent-bright);
}

/* Share link button */
.share-link-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    font-size: 0.875rem;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.share-link-btn:hover {
    opacity: 1;
}

/* === Description === */
.error-description {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

/* === Meta badges === */
.error-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.meta-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.meta-badge.introduced {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

.meta-badge.deprecated {
    background: var(--sev-error);
    color: white;
}

.meta-badge.visibility-internal {
    background: var(--role-internal-bg);
    color: var(--role-internal);
}

.meta-badge.visibility-developer {
    background: var(--role-developer-bg);
    color: var(--role-developer);
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 0.125rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
}

/* === Card Body === */
.error-card-body {
    border-top: 1px solid var(--border-color);
}

/* === Error Sections === */
.error-section {
    border-bottom: 1px solid var(--border-color);
}

.error-section:last-child {
    border-bottom: none;
}

.error-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1.25rem;
    background: var(--bg-secondary);
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-align: left;
    transition: background var(--transition-fast);
}

.error-section-toggle:hover {
    background: var(--bg-hover);
}

.toggle-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.error-section-toggle .icon {
    font-size: 0.625rem;
    transition: transform var(--transition-fast);
}

.error-section.open .error-section-toggle .icon {
    transform: rotate(180deg);
}

.error-section-content {
    display: none;
    padding: 1rem 1.25rem;
}

.error-section.open .error-section-content {
    display: block;
}

/* === Code Snippet === */
.code-snippet {
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: var(--code-bg);
}

.code-snippet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

/* Address bar style (like Chrome) */
.code-snippet-address-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem 0.25rem 0.375rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    min-width: 120px;
}

.code-snippet-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.code-snippet-lang {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--bg-tertiary);
    background: var(--text-muted);
    padding: 0.125rem 0.375rem;
    border-radius: 999px;
}

.code-snippet-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.code-snippet-role {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
}

.code-snippet-role.internal {
    background: var(--role-internal-bg);
    color: var(--role-internal);
}

.code-snippet-role.developer {
    background: var(--role-developer-bg);
    color: var(--role-developer);
}

.code-snippet-role.public {
    background: var(--role-public-bg);
    color: var(--role-public);
}

.snippet-copy-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    background: var(--bg-hover);
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.snippet-copy-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.code-snippet-content {
    padding: 0;
}

.code-snippet-content pre,
.code-snippet-content pre[class*="language-"] {
    margin: 0 !important;
    padding: 0.75rem 1rem !important;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--code-text);
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--code-bg) !important;
    border-radius: 0 !important;
    overflow: auto;
}

.code-snippet-content code {
    font-family: inherit;
}

/* === Hints List === */
.hint-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hint-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.hint-icon {
    color: var(--accent-primary);
    flex-shrink: 0;
}

/* === Related Codes === */
.related-codes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.related-code {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    padding: 0.375rem 0.625rem;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: var(--border-radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.related-code:hover {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

/* === Tags === */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    font-size: 0.8125rem;
    padding: 0.25rem 0.625rem;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border-radius: var(--border-radius-full);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.tag:hover {
    background: var(--accent-secondary);
    color: white;
}

/* === No Content State === */
.error-description-full {
    padding: 1rem 1.25rem;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;
}