/* CQC Report Decoder — Stylesheet
   Font: Inter (Google Fonts)
   ─────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Reset / Base ───────────────────────────────── */
.cqcd-wrap *,
.cqcd-wrap *::before,
.cqcd-wrap *::after {
    box-sizing: border-box;
}

.cqcd-wrap {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: #3D3C37;
    max-width: 820px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    background: #f8f6ef;
}

/* ── Logo strip ─────────────────────────────────── */
.cqcd-logo-strip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.cqcd-logo-badge {
    background: #3D3C37;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
}

.cqcd-logo-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: #6b6760;
    letter-spacing: 0.02em;
}

/* ── Hero ───────────────────────────────────────── */
.cqcd-hero {
    text-align: center;
    margin-bottom: 2rem;
}

.cqcd-title {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    color: #3D3C37;
    margin: 0 0 0.8rem;
    line-height: 1.2;
}

.cqcd-subtitle {
    font-size: 1.05rem;
    color: #6b6760;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.65;
}

/* ── Form card ──────────────────────────────────── */
.cqcd-form-card {
    background: #fffdf7;
    border-radius: 18px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.09);
    padding: 2rem;
    margin-bottom: 1.75rem;
}

.cqcd-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #A29E93;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.6rem;
}

.cqcd-input-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cqcd-input {
    flex: 1;
    min-width: 200px;
    border: 2px solid #e4e4e7;
    border-radius: 10px;
    padding: 0.85rem 1.1rem;
    font-size: 1rem;
    font-family: inherit;
    color: #3D3C37;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    background: #faf7f0;
}

.cqcd-input:focus {
    border-color: #B17804;
    background: #fffdf7;
    box-shadow: 0 0 0 3px rgba(177, 120, 4, 0.12);
}

.cqcd-btn-primary {
    background: #B17804;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.85rem 1.6rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s, transform 0.1s;
}

.cqcd-btn-primary:hover {
    background: #9F5928;
    transform: translateY(-1px);
}

.cqcd-btn-primary:active {
    transform: translateY(0);
}

.cqcd-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.cqcd-hint {
    margin: 0.75rem 0 0;
    font-size: 0.845rem;
    color: #A29E93;
}

.cqcd-hint a {
    color: #B17804;
    text-decoration: underline;
}

/* ── Feature strip ──────────────────────────────── */
.cqcd-features {
    display: flex;
    justify-content: center;
    gap: 1.5rem 2.5rem;
    flex-wrap: wrap;
}

.cqcd-feature {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.875rem;
    color: #7a7570;
}

.cqcd-feature-icon {
    font-size: 1rem;
}

/* ── Loading ────────────────────────────────────── */
.cqcd-loading {
    text-align: center;
    padding: 4rem 1rem;
}

.cqcd-spinner-wrap {
    margin-bottom: 1.75rem;
}

.cqcd-spinner {
    width: 56px;
    height: 56px;
    border: 4px solid #e4e4e7;
    border-top-color: #B17804;
    border-radius: 50%;
    margin: 0 auto;
    animation: cqcd-spin 0.85s linear infinite;
}

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

.cqcd-loading-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: #3D3C37;
    margin: 0 0 2rem;
}

.cqcd-progress-steps {
    display: inline-flex;
    flex-direction: column;
    gap: 0.9rem;
    text-align: left;
}

.cqcd-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: #d1cdc7;
    transition: color 0.4s;
}

.cqcd-step.active {
    color: #3D3C37;
    font-weight: 500;
}

.cqcd-step.done {
    color: #4A4C24;
    font-weight: 500;
}

.cqcd-step-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    transition: background 0.4s;
}

/* ── Results ────────────────────────────────────── */
.cqcd-results-wrap {
    animation: cqcd-fade-up 0.45s ease;
}

@keyframes cqcd-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Results header */
.cqcd-results-header {
    text-align: center;
    margin-bottom: 2rem;
}

.cqcd-report-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
}

.cqcd-home-name {
    font-size: 1.65rem;
    font-weight: 700;
    color: #3D3C37;
    margin: 0 0 0.3rem;
    line-height: 1.25;
}

.cqcd-home-address {
    font-size: 0.9rem;
    color: #A29E93;
    margin: 0 0 0.35rem;
}

.cqcd-inspection-date {
    font-size: 0.82rem;
    color: #b8b4ac;
    margin: 0 0 1.25rem;
}

/* Overall rating badge */
.cqcd-overall-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.2rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.cqcd-overall-badge .cqcd-badge-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
}

/* Rating colour tokens */
.r-outstanding,
.r-good        { background: #eef2e6; color: #4A4C24; }
.r-requires    { background: #fdf3d7; color: #8a5200; }
.r-inadequate  { background: #faeae4; color: #96370B; }
.r-unknown     { background: #f3f4f6; color: #374151; }

/* Overall verdict */
.cqcd-overall-verdict {
    background: #f5f1e8;
    border-left: 4px solid #B17804;
    border-radius: 0 12px 12px 0;
    padding: 1.25rem 1.5rem;
    font-size: 1.05rem;
    color: #3D3C37;
    line-height: 1.75;
    text-align: left;
    margin-bottom: 2rem;
}

/* ── Domain cards ───────────────────────────────── */
.cqcd-domains {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.cqcd-domain-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    border-left: 5px solid #e4e4e7;
    transition: box-shadow 0.2s;
}

.cqcd-domain-card:hover {
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.11);
}

/* Domain left-border colours */
.cqcd-domain-card.r-outstanding,
.cqcd-domain-card.r-good       { border-left-color: #4A4C24; }
.cqcd-domain-card.r-requires   { border-left-color: #B17804; }
.cqcd-domain-card.r-inadequate { border-left-color: #96370B; }

/* Domain header */
.cqcd-domain-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem 0.9rem;
    flex-wrap: wrap;
}

.cqcd-domain-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.cqcd-domain-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #3D3C37;
    flex: 1;
}

/* Traffic light pill */
.cqcd-traffic-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.85rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cqcd-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* Pill colours — inherit from parent card class */
.cqcd-domain-card.r-outstanding .cqcd-traffic-pill,
.cqcd-domain-card.r-good        .cqcd-traffic-pill { background: #eef2e6; color: #4A4C24; }
.cqcd-domain-card.r-requires    .cqcd-traffic-pill { background: #fdf3d7; color: #8a5200; }
.cqcd-domain-card.r-inadequate  .cqcd-traffic-pill { background: #faeae4; color: #96370B; }
.cqcd-domain-card.r-unknown     .cqcd-traffic-pill { background: #f3f4f6; color: #374151; }

/* Domain body */
.cqcd-domain-body {
    padding: 0 1.5rem 1.5rem;
}

.cqcd-plain-english {
    font-size: 1rem;
    font-weight: 600;
    color: #3D3C37;
    margin: 0 0 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #f0f0f2;
    line-height: 1.5;
}

.cqcd-for-relative-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #A29E93;
    margin: 0 0 0.4rem;
}

.cqcd-for-relative {
    font-size: 0.96rem;
    color: #4a4643;
    line-height: 1.72;
    margin: 0 0 0.85rem;
}

.cqcd-watch-out {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    background: #fdf3d7;
    border: 1px solid #e4c44a;
    border-radius: 9px;
    padding: 0.7rem 1rem;
    font-size: 0.875rem;
    color: #96370B;
    line-height: 1.55;
}

.cqcd-watch-icon {
    flex-shrink: 0;
    font-size: 1rem;
    margin-top: 0.05rem;
}

/* ── Action buttons ─────────────────────────────── */
.cqcd-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.cqcd-btn-pdf {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #B17804;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.9rem 1.8rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.18s, transform 0.1s;
}

.cqcd-btn-pdf:hover {
    background: #9F5928;
    color: #fff;
    transform: translateY(-1px);
}

.cqcd-btn-pdf:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
}

.cqcd-btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.9rem 1.8rem;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.18s, transform 0.1s;
}

.cqcd-btn-cta:hover {
    opacity: 0.92;
    color: #fff;
    transform: translateY(-1px);
}

/* Start over link */
.cqcd-start-over {
    display: block;
    text-align: center;
    font-size: 0.88rem;
    color: #aaa;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    text-decoration: underline;
    margin: 0.5rem auto 0;
}

.cqcd-start-over:hover {
    color: #3D3C37;
}

/* ── Disclaimer ─────────────────────────────────── */
.cqcd-disclaimer {
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    background: #f5f1e8;
    border-radius: 10px;
    font-size: 0.8rem;
    color: #A29E93;
    line-height: 1.65;
    text-align: center;
}

.cqcd-disclaimer a {
    color: #A29E93;
}

/* ── Manual ratings form ────────────────────────── */
.cqcd-manual-wrap {
    animation: cqcd-fade-up 0.4s ease;
}

.cqcd-manual-header {
    text-align: center;
    margin-bottom: 1.75rem;
}

.cqcd-manual-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3D3C37;
    margin: 0 0 0.6rem;
}

.cqcd-manual-desc {
    font-size: 0.98rem;
    color: #6b6760;
    line-height: 1.65;
    max-width: 560px;
    margin: 0 auto;
}

.cqcd-manual-desc a { color: #B17804; }

.cqcd-manual-name-row {
    margin-bottom: 1.25rem;
}

.cqcd-manual-domains {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.cqcd-manual-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fffdf7;
    border: 1px solid #e4e4e7;
    border-radius: 10px;
    padding: 0.75rem 1.1rem;
}

.cqcd-manual-domain-label {
    flex: 1;
    font-weight: 600;
    font-size: 0.95rem;
    color: #3D3C37;
}

.cqcd-manual-select {
    border: 2px solid #e4e4e7;
    border-radius: 8px;
    padding: 0.45rem 0.75rem;
    font-size: 0.9rem;
    font-family: inherit;
    color: #3D3C37;
    background: #faf7f0;
    outline: none;
    cursor: pointer;
    transition: border-color 0.18s;
    min-width: 195px;
}

.cqcd-manual-select:focus {
    border-color: #B17804;
}

.cqcd-manual-actions {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.cqcd-manual-actions .cqcd-btn-primary {
    padding: 0.9rem 2.5rem;
    font-size: 1.05rem;
}

@media (max-width: 520px) {
    .cqcd-manual-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .cqcd-manual-select {
        width: 100%;
    }
}

/* ── Archive notice ─────────────────────────────── */
.cqcd-archive-notice {
    display: inline-block;
    background: #fdf3d7;
    border: 1px solid #e4c44a;
    border-radius: 8px;
    padding: 0.5rem 0.9rem;
    font-size: 0.82rem;
    color: #8a5200;
    line-height: 1.5;
    margin-top: 0.5rem;
}

.cqcd-archive-notice a { color: #96370B; }

/* ── Error ──────────────────────────────────────── */
.cqcd-error {
    background: #faeae4;
    border: 1px solid #dba090;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    color: #96370B;
    font-size: 0.9rem;
    margin-top: 1rem;
    line-height: 1.55;
}

/* ── Retry notice ───────────────────────────────── */
.cqcd-retry-notice {
    background: #fdf3d7;
    border: 1px solid #e6c96a;
    border-left: 4px solid #B17804;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    color: #3D3C37;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-top: 1rem;
}

.cqcd-retry-title {
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 0.6rem;
    color: #8a5200;
}

.cqcd-retry-notice p {
    margin: 0 0 0.5rem;
}

.cqcd-retry-notice p:last-child {
    margin-bottom: 0;
}

.cqcd-retry-notice a {
    color: #B17804;
    text-decoration: underline;
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 580px) {
    .cqcd-input-row {
        flex-direction: column;
    }

    .cqcd-btn-primary {
        width: 100%;
        justify-content: center;
    }

    .cqcd-domain-header {
        gap: 0.6rem;
    }

    .cqcd-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cqcd-btn-pdf,
    .cqcd-btn-cta {
        justify-content: center;
    }

    .cqcd-features {
        gap: 0.85rem 1.5rem;
    }
}

/* ── Print / PDF styles ─────────────────────────── */
@media print {
    .cqcd-form-section,
    .cqcd-loading,
    .cqcd-actions,
    .cqcd-start-over { display: none !important; }

    .cqcd-wrap {
        padding: 0;
        max-width: 100%;
    }

    .cqcd-domain-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #e4e4e7;
    }
}