/* ============================================================================
   Feedback — notices, alerts, empty states, progress, lists, toasts, dialog
   ========================================================================== */

.notice {
    padding: var(--space-5) var(--space-7);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.notice-success { background: var(--success-soft); color: var(--success-on-soft); }
.notice-warning { background: var(--warning-soft); color: var(--warning-on-soft); }
.notice-error { background: var(--danger-soft); color: var(--danger-on-soft); }
.notice-info { background: var(--info-soft); color: var(--info-on-soft); }

.alert-critical { border-left: var(--border-accent-thick) solid var(--danger-on-soft); }
.alert-critical i { color: var(--danger-on-soft); }
.alert-warning { border-left: var(--border-accent-thick) solid var(--warning); }
.alert-warning i { color: var(--warning); }
.alert-info { border-left: var(--border-accent-thick) solid var(--info); }
.alert-info i { color: var(--info); }
.alert-critical-bg { background: var(--danger-soft); }
.alert-warning-bg { background: var(--warning-soft); }

.limitations-box {
    background: var(--warning-soft);
    border: var(--border-width) solid var(--warning);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-7);
    font-size: var(--text-md);
    color: var(--warning-on-soft);
    line-height: var(--leading-normal);
}

.empty-state {
    padding: var(--space-24) var(--space-12);
    text-align: center;
    color: var(--text-muted);
}
.empty-state i { font-size: var(--text-5xl); margin-bottom: var(--space-6); display: block; color: var(--border-strong); }
.empty-state p { font-size: var(--text-md); }
.empty-state a { color: var(--text-link); }
.empty-state a:hover { text-decoration: underline; }
.empty-state-sm { padding: var(--space-12); }

.progress-bar {
    height: var(--space-3);
    background: var(--chart-track);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--brand);
    transition: width 0.4s ease;
}
.progress-bar-sm { height: var(--space-2); }
/* The average on a breakdown table, drawn on the rows' own scale. Same geometry as a row's bar
   and a different colour, because it is the reference the rows are read against rather than one
   more competitor in the ranking. */
.progress-bar-muted { background: var(--text-muted); }
.progress-green { background: var(--success); }
.progress-blue { background: var(--info); }
.progress-yellow { background: var(--warning); }
.progress-red { background: var(--danger); }

.list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6) var(--space-8);
    border-bottom: var(--border-width) solid var(--border-subtle);
    transition: background var(--transition-fast);
}
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: var(--surface-hover); }
.list-item-title { font-weight: var(--weight-medium); font-size: var(--text-md); color: var(--text); }
.list-item-sub { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-px); }

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }
.spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: var(--border-width-thick) solid var(--border-strong);
    border-top-color: var(--brand);
    border-radius: var(--radius-circle);
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Autosave: htmx puts .htmx-request on the element that issued the request for the duration of the
   flight, so the in-flight marker needs no JavaScript of its own. */
.autosave-hint {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.autosave-spinner { visibility: hidden; }
.htmx-request .autosave-spinner { visibility: visible; }

#toast-container {
    position: fixed;
    bottom: 52px;
    right: var(--space-10);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    pointer-events: none;
}
.job-toast {
    background: var(--surface-raised);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-8);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-base);
    color: var(--text);
    max-width: 360px;
    pointer-events: auto;
    animation: toastIn var(--transition-slow) ease;
}
.job-toast-success { border-left: var(--border-accent) solid var(--success); }
.job-toast-error { border-left: var(--border-accent) solid var(--danger); }
.job-toast-warning { border-left: var(--border-accent) solid var(--warning); }
.job-toast-info { border-left: var(--border-accent) solid var(--info); }
.job-toast-success i { color: var(--success); }
.job-toast-error i { color: var(--danger); }
.job-toast-warning i { color: var(--warning); }
.job-toast-info i { color: var(--info); }
.job-toast-exit { animation: toastOut var(--transition-slow) ease forwards; }
@keyframes toastIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-10px); } }

/* A native <dialog> opened with showModal(), so focus trapping, Escape and the inert backdrop are
   the browser's job. The chrome below is the .card shell at dialog size. */
.ckwm-confirm {
    /* The UA centres a modal dialog with `margin: auto`, and the reset at the top of this file
       zeroes the margin on every element — so without this the dialog pins itself to the top-left
       corner and the backdrop click never has a corner to land in. */
    margin: auto;
    padding: 0;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    color: var(--text);
    width: 420px;
    max-width: calc(100vw - 40px);
    box-shadow: var(--shadow-xl);
}
.ckwm-confirm::backdrop { background: var(--backdrop); }
.ckwm-confirm[open] { animation: confirmIn var(--transition) ease; }
.ckwm-confirm-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-7) var(--space-9);
    border-bottom: var(--border-width) solid var(--border-subtle);
}
.ckwm-confirm-head h2 {
    margin: 0;
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--text);
}
.ckwm-confirm-head i { color: var(--info); }
.ckwm-confirm-danger .ckwm-confirm-head i { color: var(--danger-on-soft); }
.ckwm-confirm-message {
    margin: 0;
    padding: var(--space-9);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-body);
}
.ckwm-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-4);
    padding: 0 var(--space-9) var(--space-9);
}
@keyframes confirmIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================================
   Floating tooltip
   ----------------------------------------------------------------------------
   Built by page scripts (the contributions activity chart), appended to <body>
   and positioned with left/top in JS. Everything except the position is here.
   ========================================================================== */
.ckwm-tooltip {
    position: fixed;
    z-index: var(--z-toast);
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
    line-height: var(--leading-normal);
    box-shadow: var(--shadow-md);
}
.ckwm-tooltip.is-visible { opacity: 1; }
.ckwm-tooltip-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}
.ckwm-tooltip-muted { color: var(--tooltip-muted); }
.ckwm-tooltip-meta { color: var(--tooltip-muted); font-size: var(--text-xs); margin-top: var(--space-1); }
/* The series swatch takes its fill from the datum, so the colour is set inline
   as a custom property rather than as a background declaration. */
.ckwm-tooltip-swatch {
    width: var(--space-4);
    height: var(--space-4);
    border-radius: var(--radius-xs);
    background: var(--swatch-color, var(--chart-1));
    display: inline-block;
}

/* A block that stands in for content still loading. Page scripts write this
   markup into a panel before an htmx/fetch round trip resolves. */
.loading-block {
    padding: var(--space-16);
    text-align: center;
    color: var(--text-muted);
}
.loading-block-sm { padding: var(--space-12); }