/*
 * DR trend popup (§7.5) — modal + SVG step chart.
 * Design tokens from /static/dashboard/styles.css. Angular clip-path corners,
 * never border-radius (design-system rule). Loaded once in the dashboard base
 * layout; the delegated handler lives in dr-history-popup.js.
 */

/* Clickable DR badges — cue + hover lift. The base .dr-badge tiers come from
   monitoring.css; this only adds the interactive affordance. */
.dr-badge--clickable,
.dr-badge-target--clickable {
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.dr-badge--clickable:hover,
.dr-badge-target--clickable:hover {
    filter: brightness(1.18);
    transform: translateY(-1px);
}
.dr-badge--clickable:focus-visible,
.dr-badge-target--clickable:focus-visible {
    outline: 1px solid var(--neon-cyan);
    outline-offset: 2px;
}

/* ---- Overlay + card --------------------------------------------------- */
.drh-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4, 16px);
    background: rgba(5, 5, 10, 0.72);
    backdrop-filter: blur(3px);
    animation: drh-fade 0.15s ease;
}
@keyframes drh-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .drh-overlay { animation: none; } }

.drh-card {
    position: relative;
    width: 100%;
    max-width: 540px;
    background: var(--bg-card, #13131c);
    border: 1px solid rgba(0, 245, 212, 0.22);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    padding: var(--space-5, 20px) var(--space-6, 24px) var(--space-5, 20px);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}
.drh-card--loading {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drh-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.15s ease;
}
.drh-close:hover { color: var(--neon-magenta); }

/* ---- Header ----------------------------------------------------------- */
.drh-head { margin-bottom: var(--space-4, 16px); }
.drh-kicker {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--neon-cyan);
}
.drh-domain {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 4px 0 8px;
    word-break: break-all;
}
.drh-current { display: flex; align-items: center; gap: 8px; }
.drh-current-lbl {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

/* ---- Chart ------------------------------------------------------------ */
.drh-body { min-height: 60px; }
.drh-svg { width: 100%; height: auto; display: block; }

.drh-line { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.drh-line--low  { stroke: var(--text-secondary); }
.drh-line--mid  { stroke: var(--neon-cyan); }
.drh-line--high { stroke: var(--neon-green); filter: drop-shadow(0 0 4px var(--glow-green)); }

.drh-dot { fill: var(--bg-card, #13131c); stroke: var(--neon-cyan); stroke-width: 1.5; }
.drh-line--high ~ .drh-dot { stroke: var(--neon-green); }

.drh-grid { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.drh-ylab,
.drh-xlab {
    fill: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 9px;
}

/* ---- Empty / note / spinner ------------------------------------------ */
.drh-empty,
.drh-note {
    font-family: var(--font-body);
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 8px 0 0;
}
.drh-note { color: var(--text-muted); font-size: 0.78rem; text-align: center; }
.drh-empty { text-align: center; padding: var(--space-4, 16px) 0; }

.drh-foot {
    margin-top: var(--space-4, 16px);
    padding-top: var(--space-3, 12px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.drh-foot a { color: var(--text-secondary); text-decoration: none; }
.drh-foot a:hover { color: var(--neon-cyan); }

.drh-spinner {
    width: 34px;
    height: 34px;
    border: 2px solid rgba(0, 245, 212, 0.2);
    border-top-color: var(--neon-cyan);
    border-radius: 50%;
    animation: drh-spin 0.8s linear infinite;
}
@keyframes drh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .drh-spinner { animation: none; } }

@media (max-width: 600px) {
    .drh-card { padding: var(--space-4, 16px); }
    .drh-domain { font-size: 1rem; }
}