/**
 * Website Health Checker - tool-specific overrides on top of the
 * shared tools.css + workflow-tool.css.
 */

/* DA history chart (shared KeDaChart, assets/js/da-history-chart.js;
   inner .da-trend-chart-* styles live in shared tools.css). Spans the
   full section width: sections.js measures the host and sizes the
   viewBox to it, so axis text stays at natural size. */
.whc-spark-wrap {
    margin-bottom: 14px;
    border: 1px solid #efe9e1;
    border-radius: 8px;
    background: #fdfcfa;
    padding: 12px 14px 8px;
}

.whc-da-chart {
    /* The KeDaChart hover tooltip is absolutely positioned against
       this host. No width or height caps: a max-height would
       letterbox the SVG and skew the hover's x-coordinate mapping. */
    position: relative;
}

.whc-spark-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 6px;
    font-size: 12.5px;
    color: #6b6b6b;
}

.whc-spark-note { color: #9a958d; }

/* On-page score dial + category chips */
.whc-score-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.whc-score-dial {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 4px solid var(--wf-accent, #0e9f6e);
    background: #fff;
    flex: 0 0 auto;
}

.whc-score-num {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: #2f2f2f;
}

.whc-score-grade {
    font-size: 13px;
    font-weight: 700;
    color: var(--wf-accent-dark, #0b7f58);
}

.whc-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.whc-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 5px;
    border: 1px solid #efe9e1;
    border-radius: 999px;
    background: #fdfcfa;
    font-size: 12.5px;
    color: #4a4a4a;
}

/* Notice banner (http_error / spa pre-emption) */
.whc-notice {
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid #f2dcb3;
    border-radius: 8px;
    background: #fdf6e7;
    color: #7a5a1f;
    font-size: 13px;
    line-height: 1.5;
}

/* Fix cards */
.whc-fixes-title {
    margin: 4px 0 10px;
    font-size: 14.5px;
    font-weight: 700;
    color: #2f2f2f;
}

.whc-fixes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.whc-fix-card {
    border: 1px solid #efe9e1;
    border-left-width: 3px;
    border-radius: 8px;
    background: #fff;
    padding: 10px 14px;
}

.whc-fix-card.is-fail { border-left-color: #dc2626; }
.whc-fix-card.is-warn { border-left-color: #d97706; }

.whc-fix-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
}

.whc-fix-summary {
    margin: 6px 0 0;
    font-size: 13px;
    color: #5b5b5b;
    line-height: 1.5;
}

.whc-fix-how {
    margin: 6px 0 0;
    font-size: 13px;
    color: #3f6f52;
    line-height: 1.5;
}

.whc-fix-details {
    margin-top: 8px;
    font-size: 12px;
    padding: 4px 10px;
}

@media (max-width: 640px) {
    .whc-score-dial { width: 82px; height: 82px; }
    .whc-score-num { font-size: 25px; }
}

/* The concrete audited item on a fix card (the actual description /
   title / URL the check measured). */
.whc-fix-value {
    margin: 8px 0 0;
    padding: 8px 12px;
    border: 1px solid #efe9e1;
    border-radius: 6px;
    background: #fdfcfa;
    font-size: 13px;
    color: #3f3f3f;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.whc-fix-excerpt {
    margin: 6px 0 0;
    font-size: 12.5px;
    font-style: italic;
    color: #6b6b6b;
    line-height: 1.5;
    overflow-wrap: anywhere;
}