/* 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: #1a1a2e;
    max-width: 820px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

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

.cqcd-logo-badge {
    background: #1a1a2e;
    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: #555;
    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: #1a1a2e;
    margin: 0 0 0.8rem;
    line-height: 1.2;
}

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

/* ── Form card ──────────────────────────────────── */
.cqcd-form-card {
    background: #fff;
    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: #888;
    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: #1a1a2e;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    background: #fafafa;
}

.cqcd-input:focus {
    border-color: #1a1a2e;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(26, 26, 46, 0.08);
}

.cqcd-btn-primary {
    background: #1a1a2e;
    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: #2d2d4a;
    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: #999;
}

.cqcd-hint a {
    color: #1a1a2e;
    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: #666;
}

.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: #1a1a2e;
    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: #1a1a2e;
    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: #ccc;
    transition: color 0.4s;
}

.cqcd-step.active {
    color: #1a1a2e;
    font-weight: 500;
}

.cqcd-step.done {
    color: #22c55e;
    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: #1a1a2e;
    margin: 0 0 0.3rem;
    line-height: 1.25;
}

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

.cqcd-inspection-date {
    font-size: 0.82rem;
    color: #bbb;
    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: #dcfce7; color: #14532d; }
.r-requires    { background: #fef9c3; color: #713f12; }
.r-inadequate  { background: #fee2e2; color: #7f1d1d; }
.r-unknown     { background: #f3f4f6; color: #374151; }

/* Overall verdict */
.cqcd-overall-verdict {
    background: #f7f7fc;
    border-left: 4px solid #1a1a2e;
    border-radius: 0 12px 12px 0;
    padding: 1.25rem 1.5rem;
    font-size: 1.05rem;
    color: #333;
    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: #22c55e; }
.cqcd-domain-card.r-requires   { border-left-color: #f59e0b; }
.cqcd-domain-card.r-inadequate { border-left-color: #ef4444; }

/* 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: #1a1a2e;
    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: #dcfce7; color: #14532d; }
.cqcd-domain-card.r-requires    .cqcd-traffic-pill { background: #fef9c3; color: #713f12; }
.cqcd-domain-card.r-inadequate  .cqcd-traffic-pill { background: #fee2e2; color: #7f1d1d; }
.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: #222;
    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: #aaa;
    margin: 0 0 0.4rem;
}

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

.cqcd-watch-out {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 9px;
    padding: 0.7rem 1rem;
    font-size: 0.875rem;
    color: #78350f;
    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: #1a1a2e;
    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: #2d2d4a;
    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: #1a1a2e;
}

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

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

/* ── 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: #1a1a2e;
    margin: 0 0 0.6rem;
}

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

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

.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: #fff;
    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: #1a1a2e;
}

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

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

.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: #fef9c3;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 0.5rem 0.9rem;
    font-size: 0.82rem;
    color: #713f12;
    line-height: 1.5;
    margin-top: 0.5rem;
}

.cqcd-archive-notice a { color: #92400e; }

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

/* ── 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;
    }
}