/* H1 Checker , tool-specific overrides on top of shared tools.css */

/* Mode toggle , second mode is "bulk", which matches the shared slide rule.
   No per-tool override needed. */

/* Form options row */
.h1c-options-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
}
.h1c-option {
    display: flex;
    flex-direction: column;
    flex: 1 1 320px;
    min-width: 0;
}
/* Shared .text-input has flex: 1 1 320px which becomes a 320px height
   request inside a column-flex parent. Reset to auto-grow only. */
.h1c-option .text-input { flex: 0 0 auto; }

.h1c-urls-textarea {
    width: 100%;
    resize: vertical;
    min-height: 120px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 13px;
    line-height: 1.5;
}

/* Live keyword preview card */
.h1c-kw-preview {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--ink-50);
    color: var(--ink-700);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
}
.h1c-kw-preview[hidden] { display: none; }
.h1c-kw-preview.is-loading {
    color: var(--ink-500);
    font-style: italic;
}
.h1c-kw-preview.is-empty {
    background: #fef3c7;
    color: #92400e;
}
.h1c-kw-preview-key strong { color: var(--brand); }
.h1c-kw-preview-stat {
    padding: 2px 8px;
    border-radius: 999px;
    background: white;
    border: 1px solid var(--ink-200);
    font-size: 12px;
}

/* SERP-compare toggle row */
.h1c-serp-toggle-row {
    margin-top: 16px;
    padding: 14px;
    border-radius: 10px;
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
}
.h1c-serp-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.h1c-serp-toggle input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.h1c-serp-toggle-label {
    font-size: 14px;
    color: var(--ink-700);
}
.h1c-serp-toggle-mark { display: none; }
.h1c-serp-loc-wrap {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ink-200);
}
.h1c-serp-loc-control { position: relative; }
/* Shared .text-input is flex: 1 1 320px which only works inside an
   .input-row flex parent. Here the parent is block, so we need to
   force full-width like SERP Checker does. Same trick as the
   text-input-flex-basis-height fix. */
.h1c-serp-loc-control .text-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    flex: 0 0 auto;
}
.h1c-loc-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--ink-200);
    border-radius: 8px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    z-index: 30;
    max-height: 320px;
    overflow-y: auto;
}
.h1c-loc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
}
.h1c-loc-row:hover { background: var(--ink-50); }
.h1c-loc-name { font-weight: 500; color: var(--ink-800); }
.h1c-loc-meta { font-size: 12px; color: var(--ink-500); }
.h1c-serp-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--ink-500);
}

/* Quota chips row */
.h1c-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}

/* Bulk summary section above the table */
.h1c-bulk-summary {
    margin-bottom: 16px;
    padding: 14px 16px;
    background: white;
    border: 1px solid var(--ink-200);
    border-radius: 12px;
}
.h1c-bulk-summary h3 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-800);
}
.h1c-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.h1c-pill {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--ink-50);
    color: var(--ink-700);
    font-size: 13px;
}
.h1c-pill strong { font-weight: 700; color: var(--brand); }
.h1c-pill.is-warn { background: #fef3c7; color: #92400e; }
.h1c-pill.is-warn strong { color: #b45309; }
.h1c-pill.is-danger { background: #fee2e2; color: #991b1b; }
.h1c-pill.is-danger strong { color: #b91c1c; }

/* Bulk results table */
.h1c-bulk-table {
    width: 100%;
}
.h1c-bulk-table th { white-space: nowrap; }
.h1c-bulk-row { cursor: pointer; }
.h1c-bulk-row:hover { background: var(--ink-50); }
.h1c-col-url {
    min-width: 200px;
    max-width: 320px;
    word-break: break-all;
}
.h1c-col-h1 {
    min-width: 220px;
    max-width: 360px;
    word-break: break-word;
}
.h1c-col-num { text-align: right; white-space: nowrap; min-width: 80px; }
.h1c-col-grade { text-align: center; min-width: 70px; }
.h1c-url-text {
    color: var(--brand);
}
.h1c-h1-text {
    color: var(--ink-700);
}

/* Grade pills */
.h1c-grade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
}
.h1c-grade-a { background: #dcfce7; color: #166534; }
.h1c-grade-b { background: #ecfccb; color: #3f6212; }
.h1c-grade-c { background: #fef3c7; color: #92400e; }
.h1c-grade-d { background: #fed7aa; color: #9a3412; }
.h1c-grade-f { background: #fee2e2; color: #991b1b; }

/* Bulk detail expansion */
.h1c-bulk-detail td { background: var(--ink-50); padding: 0 !important; }
.h1c-detail-inner { padding: 16px 18px; }

/* Inner widgets sit inside .results-region which has no padding (the
   shared region carries its own border + radius). Add breathing room
   around the keyword card, page summary, hierarchy tree, findings,
   SERP card, and AI rewrite card so they don't touch the outer
   border. The last child drops its own margin so the bottom padding
   doesn't compound. */
.h1c-result-body {
    padding: 18px 22px 4px;
}
.h1c-result-body > section:last-child {
    margin-bottom: 18px;
}
/* Bulk mode renders summary + table inside .h1c-result-body too;
   the table chrome ships its own padding/borders, but the summary
   above it needs the same breathing room. */
.h1c-result-body > .h1c-bulk-summary {
    margin-left: 0;
    margin-right: 0;
}

/* Page summary (single mode) */
.h1c-page-summary {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 18px;
    background: white;
    border: 1px solid var(--ink-200);
    border-radius: 12px;
    margin-bottom: 16px;
}
.h1c-grade-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 16px;
    flex-shrink: 0;
}
.h1c-grade-card.h1c-grade-a { background: #dcfce7; color: #166534; }
.h1c-grade-card.h1c-grade-b { background: #ecfccb; color: #3f6212; }
.h1c-grade-card.h1c-grade-c { background: #fef3c7; color: #92400e; }
.h1c-grade-card.h1c-grade-d { background: #fed7aa; color: #9a3412; }
.h1c-grade-card.h1c-grade-f { background: #fee2e2; color: #991b1b; }
.h1c-grade-letter {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}
.h1c-grade-score {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.85;
    margin-top: 2px;
}
.h1c-page-meta {
    flex: 1;
    min-width: 0;
}
.h1c-page-url, .h1c-page-h1, .h1c-page-title {
    margin: 0 0 6px;
    font-size: 14px;
    color: var(--ink-700);
}
.h1c-page-url a { color: var(--brand); word-break: break-all; }
.h1c-page-h1 strong, .h1c-page-title strong { color: var(--ink-800); }
.h1c-page-missing { color: #b91c1c; font-weight: 600; }

/* Hierarchy tree */
.h1c-tree-card {
    background: white;
    border: 1px solid var(--ink-200);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
}
.h1c-tree-card h4 {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-800);
}
.h1c-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}
.h1c-tree-empty {
    color: var(--ink-500);
    padding: 8px 0;
}
.h1c-tree-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 10px;
    margin-bottom: 4px;
    border-radius: 6px;
    background: var(--ink-50);
    font-size: 14px;
    color: var(--ink-700);
}
.h1c-tree-item.is-empty .h1c-tree-text {
    color: #b91c1c;
    font-style: italic;
}
.h1c-tree-tag {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 4px;
    background: white;
    font-weight: 600;
    font-size: 11px;
    color: var(--ink-700);
}
.h1c-tree-text {
    flex: 1;
    word-break: break-word;
}
.h1c-tree-meta {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--ink-500);
}
.h1c-tree-item.h1c-level-h1 { background: #dbeafe; }
.h1c-tree-item.h1c-level-h1 .h1c-tree-tag { background: #2563eb; color: white; }
.h1c-tree-item.h1c-level-h2 { background: #ede9fe; }
.h1c-tree-item.h1c-level-h2 .h1c-tree-tag { background: #7c3aed; color: white; }
.h1c-tree-item.h1c-level-h3 { background: #fdf4ff; }
.h1c-tree-item.h1c-level-h3 .h1c-tree-tag { background: #c026d3; color: white; }
.h1c-tree-item.h1c-level-h4 { background: #fef3c7; }
.h1c-tree-item.h1c-level-h4 .h1c-tree-tag { background: #d97706; color: white; }
.h1c-tree-item.h1c-level-h5 { background: #f1f5f9; }
.h1c-tree-item.h1c-level-h5 .h1c-tree-tag { background: #475569; color: white; }
.h1c-tree-item.h1c-level-h6 { background: var(--ink-50); }
.h1c-tree-item.h1c-level-h6 .h1c-tree-tag { background: var(--ink-500); color: white; }

/* Findings catalog */
.h1c-issues-card {
    background: white;
    border: 1px solid var(--ink-200);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
}
.h1c-issues-card h4 {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-800);
}
.h1c-issues-empty p {
    margin: 0;
    color: #047857;
    font-size: 14px;
}
.h1c-issues-group { margin-bottom: 12px; }
.h1c-issues-group:last-child { margin-bottom: 0; }
.h1c-issues-group h5 {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.h1c-issues-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.h1c-issue {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: var(--ink-50);
}
.h1c-issue:last-child { margin-bottom: 0; }
.h1c-iss-sev {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    height: fit-content;
}
.h1c-iss-sev-high { background: #fee2e2; color: #991b1b; }
.h1c-iss-sev-warn { background: #fef3c7; color: #92400e; }
.h1c-iss-sev-info { background: #dbeafe; color: #1e40af; }
.h1c-issue-body { flex: 1; }
.h1c-issue-body strong {
    display: block;
    font-size: 14px;
    color: var(--ink-800);
    margin-bottom: 2px;
}
.h1c-issue-body p {
    margin: 0;
    font-size: 13px;
    color: var(--ink-600);
    line-height: 1.5;
}

/* Keyword card (above hierarchy) */
.h1c-kw-card {
    background: linear-gradient(135deg, #eef2ff 0%, #f3e8ff 100%);
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 16px;
}
.h1c-kw-head {
    font-size: 14px;
    color: var(--ink-700);
    margin-bottom: 8px;
}
.h1c-kw-head strong { color: var(--brand); font-size: 16px; }
.h1c-kw-label { font-weight: 500; }
.h1c-kw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
}
.h1c-kw-grid > div {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    background: white;
    border-radius: 8px;
}
.h1c-kw-stat-label {
    font-size: 11px;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.h1c-kw-stat, .h1c-kw-stat-spark {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-800);
}
.h1c-spark { width: 100%; height: 22px; color: var(--brand); }
.h1c-kw-empty { margin: 0; color: var(--ink-500); font-style: italic; }

/* SERP compare card */
.h1c-serp-card, .h1c-ai-card {
    background: white;
    border: 1px solid var(--ink-200);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
}
.h1c-serp-card-head, .h1c-ai-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.h1c-serp-card-head h4, .h1c-ai-card-head h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-800);
}
.h1c-serp-disabled, .h1c-ai-disabled {
    margin: 0;
    font-size: 13px;
    color: var(--ink-500);
    font-style: italic;
}
.h1c-serp-blurb, .h1c-ai-blurb {
    margin: 0;
    color: var(--ink-600);
    font-size: 13px;
}
.h1c-serp-context {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--ink-700);
}
.h1c-serp-context strong { color: var(--brand); }
.h1c-serp-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.h1c-serp-row {
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: var(--ink-50);
}
.h1c-serp-row:last-child { margin-bottom: 0; }
.h1c-serp-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 4px;
}
.h1c-serp-rank {
    background: var(--brand);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.h1c-serp-url {
    color: var(--ink-700);
    font-weight: 500;
    word-break: break-all;
}
.h1c-serp-h1 {
    font-size: 15px;
    color: var(--ink-800);
    word-break: break-word;
}
.h1c-serp-h1.is-missing, .h1c-serp-h1.is-failed {
    color: var(--ink-500);
    font-size: 13px;
}
.h1c-serp-yours {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ink-200);
    font-size: 14px;
    color: var(--ink-700);
    word-break: break-word;
}
.h1c-serp-yours strong { color: var(--brand); }
.h1c-serp-empty {
    margin: 0;
    color: var(--ink-500);
    font-style: italic;
}

/* AI rewrite */
.h1c-ai-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.h1c-ai-item {
    padding: 12px 14px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: linear-gradient(135deg, #eef2ff 0%, #f3e8ff 100%);
    border: 1px solid #c7d2fe;
}
.h1c-ai-item:last-child { margin-bottom: 0; }
.h1c-ai-item-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.h1c-ai-text {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-800);
    word-break: break-word;
    min-width: 240px;
}
.h1c-ai-meta {
    font-size: 12px;
    color: var(--ink-500);
    background: white;
    padding: 2px 8px;
    border-radius: 4px;
}
.h1c-ai-copy {
    padding: 4px 10px;
    border: 1px solid var(--brand);
    background: white;
    color: var(--brand);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}
.h1c-ai-copy:hover {
    background: var(--brand);
    color: white;
}
.h1c-ai-why {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--ink-600);
    line-height: 1.5;
}
.h1c-ai-empty, .h1c-ai-notes {
    margin: 0;
    font-size: 13px;
    color: var(--ink-500);
}
.h1c-ai-notes { margin-top: 8px; font-style: italic; }

/* Spinner used during in-flight serp/AI calls */
.h1c-spinner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 0;
}
.h1c-spinner-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    animation: h1cBounce 1.4s ease-in-out infinite both;
}
.h1c-spinner-dot:nth-child(1) { animation-delay: -0.32s; }
.h1c-spinner-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes h1cBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

/* Fail card (URL fetch error in single mode) */
.h1c-fail-card {
    padding: 16px 18px;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 12px;
    color: #991b1b;
}
.h1c-fail-card strong { display: block; margin-bottom: 4px; }
.h1c-fail-card p { margin: 0; font-size: 14px; }
.h1c-fail-inline {
    padding: 8px 12px;
    background: #fee2e2;
    border-radius: 6px;
    color: #991b1b;
    font-size: 13px;
}

/* Results subhead overrides , tools.css ships .results-subhead-item */
.results-subhead {
    padding: 8px 16px;
    background: var(--ink-50);
    border-bottom: 1px solid var(--ink-200);
    font-size: 13px;
    color: var(--ink-600);
}
.results-subhead-item { color: var(--ink-700); }
.results-subhead-item strong { font-weight: 700; color: var(--ink-800); }
.results-subhead-item.is-warn { color: #92400e; }
.results-subhead-item.is-warn strong { color: #b45309; }
.results-subhead-item.is-danger { color: #991b1b; }
.results-subhead-item.is-danger strong { color: #b91c1c; }

/* Responsive */
@media (max-width: 720px) {
    .h1c-page-summary {
        flex-direction: column;
        align-items: stretch;
    }
    .h1c-grade-card { align-self: flex-start; }
}