/* ============================================================
   WEBSITE HEALTH CHECK — component styles only
   Body, fonts, headings handled by toolbox-global.css
   All colour combos WCAG AA compliant (4.5:1 minimum)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

.hc-shell {
    max-width: 780px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 4rem;
}

.hc-lead {
    font-size: 1.05rem;
    color: #4a5c6e;
    margin: 0 0 2rem;
    max-width: 56ch;
}

/* ── Tabs ─────────────────────────────────────────────────── */
.hc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.hc-tab {
    padding: .45rem 1.1rem;
    font-size: .875rem;
    font-weight: 600;
    border: 2px solid #d0d8e0;
    border-radius: 999px;
    background: #ffffff;
    color: #4a5c6e;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    line-height: 1.4;
}

.hc-tab:hover:not([aria-selected="true"]) {
    border-color: #005fa3;
    color: #005fa3;
}

.hc-tab[aria-selected="true"] {
    background: #2d3f52;
    border-color: #2d3f52;
    color: #ffffff;
}

.hc-tab:focus-visible {
    outline: 3px solid #005fa3;
    outline-offset: 2px;
}

/* ── URL input ────────────────────────────────────────────── */
.hc-input-group { margin-bottom: 1.25rem; }

.hc-label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #cbd5e1;
    margin-bottom: .4rem;
}

.hc-input-row {
    display: flex;
    gap: .75rem;
    align-items: stretch;
}

.hc-url-input {
    flex: 1;
    padding: .75rem 1rem;
    font-size: 1rem;
    border: 2px solid #d0d8e0;
    border-radius: 10px;
    background: #ffffff;
    color: #0f1923;
    transition: border-color .15s, box-shadow .15s;
    min-width: 0;
}

.hc-url-input::placeholder { color: #8fa0b0; }

.hc-url-input:focus {
    outline: none;
    border-color: #005fa3;
    box-shadow: 0 0 0 3px rgba(0,95,163,.15);
}

.hc-url-input[aria-invalid="true"] {
    border-color: #b91c1c;
    box-shadow: 0 0 0 3px rgba(185,28,28,.12);
}

.hc-run-btn {
    padding: .75rem 1.5rem;
    font-size: .95rem;
    font-weight: 700;
    background: #005fa3;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, transform .1s;
    box-shadow: 0 1px 4px rgba(15,25,35,.08);
}

.hc-run-btn:hover    { background: #004e8a; }
.hc-run-btn:active   { transform: scale(.97); }
.hc-run-btn:disabled { background: #8fa0b0; cursor: not-allowed; }

.hc-run-btn:focus-visible {
    outline: 3px solid #005fa3;
    outline-offset: 3px;
}

/* ── Error ────────────────────────────────────────────────── */
.hc-error {
    display: none;
    margin-top: .5rem;
    padding: .65rem 1rem;
    background: #fde8e8;
    color: #b91c1c;
    border-radius: 6px;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.5;
}

.hc-error a { color: #005fa3; font-weight: 700; }

/* ── Progress ─────────────────────────────────────────────── */
.hc-progress {
    display: none;
    margin: 1.5rem 0;
    background: #ffffff;
    border: 1px solid #d0d8e0;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 4px rgba(15,25,35,.08);
}

.hc-progress-title {
    font-size: .9rem;
    font-weight: 600;
    color: #0f1923;
    margin: 0 0 .85rem;
}

.hc-steps { display: flex; flex-direction: column; gap: .55rem; }

.hc-step {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .875rem;
    color: #4a5c6e;
    opacity: .4;
    transition: opacity .3s;
}

.hc-step.active { opacity: 1; color: #0f1923; }
.hc-step.done   { opacity: 1; color: #1a6b35; }

.step-icon {
    width: 20px; height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-spinner {
    width: 16px; height: 16px;
    border: 2px solid #005fa3;
    border-top-color: transparent;
    border-radius: 50%;
    animation: hc-spin .8s linear infinite;
    display: none;
}

@keyframes hc-spin { to { transform: rotate(360deg); } }

.hc-step.active .step-spinner { display: block; }
.hc-step.active .step-dot,
.hc-step.done   .step-dot     { display: none; }

.step-dot {
    width: 8px; height: 8px;
    background: #d0d8e0;
    border-radius: 50%;
}

.step-tick { display: none; font-size: .9rem; }
.hc-step.done .step-tick { display: block; }

/* ── Results ──────────────────────────────────────────────── */
.hc-results { display: none; margin-top: 1.5rem; }

.hc-score-header {
    background: #2d3f52;
    color: #ffffff;
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    box-shadow: 0 4px 16px rgba(15,25,35,.10);
}

.hc-score-dial {
    width: 80px; height: 80px;
    flex-shrink: 0;
    position: relative;
}

.hc-score-dial svg { width: 80px; height: 80px; transform: rotate(-90deg); }

.dial-track { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 7; }

.dial-fill {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    transition: stroke-dashoffset 1s ease, stroke .5s;
}

.dial-label {
    position: absolute; inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
}

.hc-score-meta       { flex: 1; min-width: 0; }
.hc-score-meta h2    { font-size: 1.35rem; font-weight: 800; margin: 0 0 .25rem; color: #ffffff; }
.hc-score-meta p     { margin: 0; font-size: .9rem; opacity: .85; }
.hc-score-pills      { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .65rem; }

.hc-score-pill {
    font-size: .75rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: rgba(255,255,255,.15);
    color: #ffffff;
}

.hc-score-pill.crit { background: rgba(239,68,68,.35); }
.hc-score-pill.warn { background: rgba(245,158,11,.35); }
.hc-score-pill.ok   { background: rgba(74,222,128,.25); }

.hc-section {
    background: #ffffff;
    border: 1px solid #d0d8e0;
    border-radius: 10px;
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(15,25,35,.08);
}

.hc-section-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    background: #ffffff;
    border: none;
    width: 100%;
    text-align: left;
    transition: background .15s;
}

.hc-section-head:hover { background: #f9fafb; }

.hc-section-head:focus-visible {
    outline: 3px solid #005fa3;
    outline-offset: -3px;
}

.section-icon  { font-size: 1.25rem; flex-shrink: 0; }

.section-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: #0f1923;
}

.section-badge {
    font-size: .75rem;
    font-weight: 700;
    padding: .2rem .65rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.badge-ok   { background: #e6f4ec; color: #1a6b35; border: 1px solid #9ad5b0; }
.badge-warn { background: #fff3d6; color: #7a4a00; border: 1px solid #e09000; }
.badge-crit { background: #fde8e8; color: #b91c1c; border: 1px solid #f5a0a0; }
.badge-info { background: #e0f0fb; color: #0c4e7a; border: 1px solid #7ec8f0; }

.section-chevron {
    width: 20px; height: 20px;
    flex-shrink: 0;
    color: #4a5c6e;
    transition: transform .25s;
}

.hc-section.open .section-chevron { transform: rotate(180deg); }

.hc-section-body {
    display: none;
    padding: 0 1.25rem 1.25rem;
    border-top: 1px solid #d0d8e0;
}

.hc-section.open .hc-section-body { display: block; }

.issue-item {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .7rem .85rem;
    margin-top: .6rem;
    border-radius: 6px;
    font-size: .9rem;
}

.issue-item.is-crit { background: #fde8e8; border-left: 3px solid #b91c1c; }
.issue-item.is-warn { background: #fff3d6; border-left: 3px solid #e09000; }
.issue-item.is-info { background: #e0f0fb; border-left: 3px solid #4aa3d8; }
.issue-item.is-ok   { background: #e6f4ec; border-left: 3px solid #6abf8a; }

.issue-item-icon  { flex-shrink: 0; font-size: 1rem; margin-top: .05rem; }
.issue-item-body  { flex: 1; }

.issue-item-title {
    font-weight: 600;
    color: #0f1923;
    margin: 0 0 .15rem;
}

.issue-item-desc {
    color: #4a5c6e;
    margin: 0;
    font-size: .875rem;
    line-height: 1.5;
}

.metric-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 0;
    border-bottom: 1px solid #d0d8e0;
    font-size: .9rem;
    gap: 1rem;
}

.metric-row:last-child { border-bottom: none; }
.metric-label { color: #4a5c6e; }

.metric-value {
    font-weight: 700;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.metric-value.good { color: #1a6b35; }
.metric-value.mid  { color: #7a4a00; }
.metric-value.bad  { color: #b91c1c; }

.hc-bar-wrap {
    height: 6px;
    background: #d0d8e0;
    border-radius: 999px;
    overflow: hidden;
    flex: 1;
    max-width: 120px;
}

.hc-bar { height: 100%; border-radius: 999px; transition: width .8s ease; }
.hc-bar.good { background: #1a6b35; }
.hc-bar.mid  { background: #d97706; }
.hc-bar.bad  { background: #b91c1c; }

.hc-score-sub {
    margin-bottom: .75rem;
    font-size: .875rem;
    color: #4a5c6e;
}

.hc-opps-heading {
    margin: 1rem 0 .5rem;
    font-size: .9rem;
    font-weight: 600;
    color: #0f1923;
}

.no-issues-msg {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #1a6b35;
    font-weight: 600;
    font-size: .9rem;
    padding-top: .75rem;
}

/* ── Disclaimer ───────────────────────────────────────────── */
.hc-disclaimer {
    margin-top: 1.5rem;
    padding: .9rem 1.1rem;
    background: #e0f0fb;
    border: 1px solid #90cff0;
    border-radius: 10px;
    font-size: .8rem;
    color: #0c4e7a;
    line-height: 1.5;
}

.hc-disclaimer a { color: #005fa3; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 560px) {
    .hc-input-row    { flex-direction: column; }
    .hc-run-btn      { width: 100%; }
    .hc-score-header { flex-direction: column; text-align: center; }
    .hc-score-pills  { justify-content: center; }
    .hc-score-dial   { margin: 0 auto; }
    .hc-tabs         { gap: .35rem; }
    .hc-tab          { font-size: .8rem; padding: .4rem .85rem; }
}

.issue-item.is-ok .issue-item-desc,
.issue-item.is-warn .issue-item-desc,
.issue-item.is-info .issue-item-desc {
    color: #0f1923;
}

.issue-item.is-ok .issue-item-title,
.issue-item.is-warn .issue-item-title,
.issue-item.is-info .issue-item-title {
    color: #0f1923;
}

.hc-step { opacity: 1; color: #0f1923; }

.hc-score-sub { color: #0f1923; }

.issue-item.is-crit .issue-item-desc { color: #0f1923; }

.hc-progress-title,
.hc-steps .hc-step span,
.hc-score-sub,
.hc-score-sub strong,
.issue-item-title,
.issue-item-desc,
.hc-section-body p,
.hc-opps-heading,
.no-issues-msg {
    color: #0f1923 !important;
}

.hc-mode-toggle { display:flex; gap:.5rem; margin-bottom:1.5rem; }
.hc-mode-btn { padding:.45rem 1.1rem; font-size:.875rem; font-weight:600; border:2px solid #d0d8e0; border-radius:999px; background:#ffffff; color:#4a5c6e; cursor:pointer; transition:border-color .15s,background .15s,color .15s; }
.hc-mode-btn.active { background:#2d3f52; border-color:#2d3f52; color:#ffffff; }
.hc-mode-btn:focus-visible { outline:3px solid #005fa3; outline-offset:2px; }
.hc-multi-input { width:100%; min-height:160px; padding:.75rem 1rem; font-size:.9rem; font-family:monospace; border:2px solid #d0d8e0; border-radius:10px; background:#ffffff; color:#0f1923; resize:vertical; transition:border-color .15s,box-shadow .15s; box-sizing:border-box; }
.hc-multi-input:focus { outline:none; border-color:#005fa3; box-shadow:0 0 0 3px rgba(0,95,163,.15); }
.hc-multi-hint { font-size:.8rem; color:#4a5c6e; margin:.35rem 0 .75rem; }
.hc-multi-progress { display:none; margin:1rem 0; background:#ffffff; border:1px solid #d0d8e0; border-radius:10px; padding:1rem 1.25rem; }
.hc-multi-progress-title { font-size:.9rem; font-weight:600; color:#0f1923; margin:0 0 .6rem; }
.hc-multi-bar-wrap { height:8px; background:#d0d8e0; border-radius:999px; overflow:hidden; margin-bottom:.5rem; }
.hc-multi-bar { height:100%; background:#005fa3; border-radius:999px; width:0%; transition:width .4s ease; }
.hc-multi-status { font-size:.85rem; color:#4a5c6e; margin:0; }
.hc-summary-table { width:100%; border-collapse:collapse; margin-top:1.25rem; font-size:.875rem; }
.hc-summary-table th { background:#2d3f52; color:#ffffff; padding:.65rem .85rem; text-align:left; font-weight:600; font-size:.8rem; white-space:nowrap; }
.hc-summary-table th:first-child { border-radius:8px 0 0 0; } .hc-summary-table th:last-child { border-radius:0 8px 0 0; }
.hc-summary-table td { padding:.6rem .85rem; border-bottom:1px solid #d0d8e0; color:#0f1923 !important; vertical-align:middle; }
.hc-summary-table tr:last-child td { border-bottom:none; }
.hc-summary-table tr:nth-child(even) td { background:#f8f9fa; }
.hc-summary-table td:first-child { font-size:.8rem; word-break:break-all; }
.score-pill { display:inline-block; font-weight:700; font-size:.8rem; padding:.2rem .55rem; border-radius:999px; min-width:36px; text-align:center; }
.score-pill.good { background:#e6f4ec; color:#1a6b35; border:1px solid #9ad5b0; }
.score-pill.mid  { background:#fff3d6; color:#7a4a00; border:1px solid #e09000; }
.score-pill.bad  { background:#fde8e8; color:#b91c1c; border:1px solid #f5a0a0; }
.score-pill.na   { background:#f0f0f0; color:#4a5c6e; border:1px solid #d0d8e0; }
.td-error { color:#b91c1c !important; font-size:.8rem; }
@media (max-width:600px) { .hc-summary-table { font-size:.75rem; } .hc-summary-table th,.hc-summary-table td { padding:.5rem .5rem; } }

/*  */

.hc-multi-input {
    width: 100%;
    min-height: 80px;
    padding: .75rem 1rem;
    font-size: .9rem;
    font-family: inherit;
    border: 2px solid #d0d8e0;
    border-radius: 10px;
    background: #ffffff;
    color: #0f1923;
    resize: vertical;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.hc-multi-input:focus {
    outline: none;
    border-color: #005fa3;
    box-shadow: 0 0 0 3px rgba(0,95,163,.15);
}
.hc-multi-hint {
    font-size: .8rem;
    margin: .35rem 0 .75rem;
}

.hc-multi-progress {
    display: none;
    margin: 1rem 0;
    background: #ffffff;
    border: 1px solid #d0d8e0;
    border-radius: 10px;
    padding: 1rem 1.25rem;
}
.hc-multi-bar-wrap { height: 8px; background: #d0d8e0; border-radius: 999px; overflow: hidden; margin-bottom: .75rem; }
.hc-multi-bar      { height: 100%; background: #005fa3; border-radius: 999px; width: 0%; transition: width .4s ease; }

.hc-dots { display: flex; gap: .35rem; align-items: center; margin-top: .5rem; }
.hc-dot  { width: 8px; height: 8px; border-radius: 50%; background: #005fa3; animation: hc-pulse 1.2s ease-in-out infinite; }
.hc-dot:nth-child(2) { animation-delay: .2s; }
.hc-dot:nth-child(3) { animation-delay: .4s; }
@keyframes hc-pulse {
    0%, 80%, 100% { transform: scale(.6); opacity: .4; }
    40%            { transform: scale(1);  opacity: 1;  }
}

.hc-url-accordion { margin-top: 1.25rem; }

.hc-url-item {
    border: 1px solid #d0d8e0;
    border-radius: 10px;
    margin-bottom: .75rem;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(15,25,35,.06);
}
.hc-url-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1.25rem;
    cursor: pointer;
    background: #ffffff;
    border: none;
    width: 100%;
    text-align: left;
    transition: background .15s;
}
.hc-url-head:hover        { background: #f4f6f8; }
.hc-url-head:focus-visible { outline: 3px solid #005fa3; outline-offset: -3px; }

.hc-url-text {
    flex: 1;
    font-size: .875rem;
    font-weight: 600;
    color: #0f1923;
    word-break: break-all;
}
.hc-url-pills { display: flex; gap: .4rem; flex-wrap: wrap; flex-shrink: 0; }

.score-pill {
    display: inline-block;
    font-weight: 700;
    font-size: .75rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    white-space: nowrap;
}
.score-pill.good { background: #e6f4ec; color: #1a6b35; border: 1px solid #9ad5b0; }
.score-pill.mid  { background: #fff3d6; color: #7a4a00; border: 1px solid #e09000; }
.score-pill.bad  { background: #fde8e8; color: #b91c1c; border: 1px solid #f5a0a0; }
.score-pill.na   { background: #f0f0f0; color: #4a5c6e; border: 1px solid #d0d8e0; }

.hc-url-overall {
    font-size: .8rem;
    font-weight: 700;
    padding: .2rem .6rem;
    border-radius: 999px;
    flex-shrink: 0;
}
.hc-url-overall.good { background: #e6f4ec; color: #1a6b35; border: 1px solid #9ad5b0; }
.hc-url-overall.mid  { background: #fff3d6; color: #7a4a00; border: 1px solid #e09000; }
.hc-url-overall.bad  { background: #fde8e8; color: #b91c1c; border: 1px solid #f5a0a0; }
.hc-url-overall.na   { background: #f0f0f0; color: #4a5c6e; border: 1px solid #d0d8e0; }

.hc-url-chevron {
    width: 20px; height: 20px;
    flex-shrink: 0;
    color: #4a5c6e;
    transition: transform .25s;
}
.hc-url-item.open .hc-url-chevron { transform: rotate(180deg); }

.hc-url-body {
    display: none;
    border-top: 1px solid #d0d8e0;
    padding: 1.25rem;
    background: #f9fafb;
}
.hc-url-item.open .hc-url-body { display: block; }

.hc-url-error {
    padding: .75rem 1.25rem;
    border-top: 1px solid #f5a0a0;
    color: #b91c1c;
    font-size: .875rem;
    background: #fde8e8;
}

.hc-print-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.25rem;
    padding: .55rem 1.25rem;
    font-size: .875rem;
    font-weight: 600;
    background: #2d3f52;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
}
.hc-print-btn:hover { background: #1e2d3d; }

.hc-score-header p,
.hc-score-meta h2,
.hc-score-meta p { color: #ffffff !important; }

@media print {
    nav, header, footer, .hc-multi-input, .hc-run-btn, .hc-print-btn,
    .hc-disclaimer, .hc-multi-hint, .hc-url-chevron,
    h2:first-of-type, p:first-of-type { display: none !important; }
    .hc-url-body   { display: block !important; }
    .hc-url-item   { box-shadow: none; border: 1px solid #ccc; margin-bottom: .5rem; }
    .hc-section    { break-inside: avoid; }
    .hc-score-header { background: #2d3f52 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    body { font-size: 11pt; }
}

@media (max-width: 600px) {
    .hc-url-pills { display: none; }
    .hc-url-text  { font-size: .8rem; }
}

#hc-progress-title,
#hc-progress-status {
    color: #0f1923 !important;
}