/*
 * The Clarity Check page. Everything here is prefixed cc- and builds on the
 * custom properties and classes in site.css, which this file does not change.
 */

/* ─── Landing: hero and tiles ─── */
.cc-hero .page-hero-inner { padding-bottom: 4.5rem; }

.cc-tiles-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 1.2rem;
}

/* Four tiles: one row of four on a wide screen, two rows of two below
   that. Never three and one. */
.cc-tiles {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.cc-tiles li { display: flex; }
@media (min-width: 900px) {
    .cc-tiles { grid-template-columns: repeat(4, 1fr); }
}

.cc-tile, .cc-option {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
    min-height: 44px;
    padding: 1.1rem 1.2rem;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.45;
    text-align: left;
    color: var(--text);
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.cc-tile:hover, .cc-option:hover { border-color: var(--accent); }
.cc-tile-label, .cc-option-label { font-weight: 500; }
.cc-tile-blurb, .cc-option-blurb { font-size: 0.88rem; color: var(--text-muted); }

/* Tiles start the questions, so they need to look like something to press. */
.cc-tile { position: relative; padding-bottom: 2.6rem; }
.cc-tile:hover { background: var(--accent-light); box-shadow: 0 6px 18px rgba(58,107,107,0.12); }
.cc-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-color: var(--accent); }
.cc-tile-arrow {
    position: absolute;
    right: 1.2rem;
    bottom: 0.9rem;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--accent);
    transition: transform 0.2s ease;
}
.cc-tile:hover .cc-tile-arrow { transform: translateX(3px); }

.cc-privacy-line {
    max-width: 560px;
    font-size: 0.85rem;
    line-height: 1.6;
}
.cc-privacy-line a, .cc-noscript a, .cc-quiet a, .cc-block a, .cc-also a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cc-privacy-line a:hover, .cc-quiet a:hover, .cc-block a:hover { color: var(--accent); }

.cc-noscript {
    max-width: 640px;
    margin-top: 1.5rem;
    padding: 1rem 1.2rem;
    background: var(--white);
    border-left: 3px solid var(--accent);
    color: var(--text);
}

/* ─── Landing: what you walk away with, closing ─── */
.cc-numbered {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}
.cc-num {
    display: block;
    font-family: var(--font-display);
    font-size: 2.6rem;
    line-height: 1;
    color: var(--accent);
    margin-bottom: 1rem;
}
.cc-numbered h3 { margin-bottom: 0.8rem; }
.cc-walk-close {
    max-width: 640px;
    margin: 3.5rem auto 0;
    text-align: center;
    color: var(--text);
}

.cc-closing { text-align: center; }
.cc-closing h2 { margin-bottom: 1rem; }
.cc-closing p { margin-bottom: 2rem; }

/* ─── Question and result screens ─── */
.cc-app {
    padding-top: var(--nav-height);
    background: var(--bg-alt);
    min-height: 100vh;
}
.cc-inner {
    max-width: 680px;
    margin: 0 auto;
    padding: 4rem 2rem 6rem;
}
.cc-app :focus { outline: none; }
.cc-app :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.cc-progress { margin-bottom: 2.5rem; }
.cc-progress-text {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.6rem;
}
.cc-bar { height: 3px; background: var(--border); }
.cc-bar span { display: block; height: 100%; background: var(--accent); transition: width 0.3s ease; }

.cc-q {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    margin-bottom: 0.8rem;
}
.cc-helper { margin-bottom: 1.8rem; }
.cc-q + .cc-options, .cc-q + .cc-text-label { margin-top: 1.8rem; }

.cc-options { display: grid; gap: 0.75rem; }
.cc-option[aria-pressed="true"] {
    border-color: var(--accent);
    background: var(--accent-light);
}

.cc-text-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.cc-textarea {
    display: block;
    width: 100%;
    padding: 0.9rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 2px;
    resize: vertical;
}
/* One 2px accent ring that hugs the field, for mouse and keyboard alike,
   in place of the site's border glow plus outline. */
.cc-textarea:focus, .cc-textarea:focus-visible {
    border-color: var(--accent);
    box-shadow: none;
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.cc-text-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.2rem;
}

.cc-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    margin-top: 2rem;
    padding: 0;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    background: none;
    border: none;
    cursor: pointer;
}
.cc-back:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }

.cc-app .btn { min-height: 44px; }

/* ─── Result ─── */
.cc-result .section-label { margin-bottom: 0.6rem; }
.cc-situation-line { margin-bottom: 1.5rem; }
.cc-headline {
    font-size: clamp(2.1rem, 4.5vw, 3rem);
    margin-bottom: 1.5rem;
}
.cc-read { color: var(--text); margin-bottom: 1.2rem; }
.cc-result strong { font-weight: 600; color: var(--text); }

.cc-label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.8rem;
}
.cc-also {
    margin: 2rem 0 0;
    padding: 1.2rem 1.4rem;
    border-left: 3px solid var(--accent);
    background: var(--white);
}
.cc-also .cc-label { margin-bottom: 0.4rem; }
.cc-block {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border);
}
.cc-big-question {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.5vw, 2.2rem);
    font-style: italic;
    line-height: 1.3;
    color: var(--text);
}
/* The one thing the visitor can act on, so it gets a panel of its own.
   The title scales like the question but always a step below it. */
.cc-exercise {
    margin-top: 3rem;
    padding: 2rem 2.2rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 2px;
}
.cc-exercise-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    font-weight: 500;
    line-height: 1.25;
    color: var(--text);
    margin-bottom: 0.8rem;
}
.cc-exercise-text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text);
}
.cc-exercise a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cc-exercise a:hover { color: var(--accent); }
.cc-own dl { display: grid; gap: 0.4rem; }
.cc-own dt { font-size: 0.85rem; font-weight: 500; color: var(--text); }
.cc-own dd {
    margin-bottom: 1rem;
    color: var(--text-muted);
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.cc-note { font-size: 0.9rem; font-style: italic; }

.cc-invite {
    margin-top: 3rem;
    padding: 2.5rem 2rem;
    background: var(--white);
    border-top: 3px solid var(--accent);
}
.cc-invite h3 { margin-bottom: 1rem; }
.cc-invite p { margin-bottom: 1rem; }
.cc-invite-line { color: var(--text); }
.cc-invite .btn { margin-top: 0.5rem; }

.cc-quiet {
    margin-top: 2rem;
    font-size: 0.9rem;
    line-height: 1.7;
}
.cc-actions { margin-top: 2rem; }
.cc-keep {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.cc-keep-help {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    line-height: 1.6;
}
.cc-keep-status {
    margin-top: 0.4rem;
    font-size: 0.9rem;
    color: var(--text);
}
.cc-keep-status:empty { display: none; }
.cc-actions .text-link { display: inline-block; margin-top: 0.8rem; padding: 0.8rem 0; line-height: 1.5; }
.cc-restart { margin-top: 2.5rem; }

/* ─── Phones ─── */
@media (max-width: 960px) {
    .cc-numbered { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 600px) {
    .cc-tile { padding: 1rem 1rem 2.4rem; }
    .cc-tile-arrow { right: 1rem; }
    .cc-exercise { padding: 1.5rem 1.25rem; }
    /* Tighter on phones so a question and its answers fit on one screen.
       Answers stay at least 44px tall. */
    .cc-app .cc-inner { padding-top: 1.75rem; }
    .cc-progress { margin-bottom: 1.5rem; }
    .cc-q { margin-bottom: 0.6rem; }
    .cc-helper { margin-bottom: 1.2rem; }
    .cc-q + .cc-options, .cc-q + .cc-text-label { margin-top: 1.2rem; }
    .cc-options { gap: 0.55rem; }
    .cc-option { padding: 0.75rem 1rem; }
    .cc-inner { padding: 2.5rem 1.25rem 4rem; }
    .cc-invite { padding: 2rem 1.25rem; }
    .cc-closing .btn, .cc-invite .btn, .cc-text-actions .btn, .cc-keep .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .cc-tile, .cc-option, .cc-bar span, .cc-tile-arrow { transition: none; }
    .cc-tile:hover .cc-tile-arrow { transform: none; }
}

/* ─── Print: the result only ─── */
/* On paper: a heading, the read, the question, the exercise and the
   visitor's own words, then one plain closing line. No buttons, links to
   follow or blocks of colour. Each section stays whole on one page. */
.cc-print-only { display: none; }

@page { size: A4; margin: 20mm; }

@media print {
    .cc-running .skip-link, .cc-running nav, .cc-running .site-footer, .cc-running #cc-landing,
    .cc-eyebrow, .cc-invite, .cc-quiet, .cc-actions, .cc-restart { display: none !important; }
    .cc-print-only { display: block; }

    body { background: none; font-size: 11.5pt; line-height: 1.5; }
    .cc-app { padding-top: 0; background: none; min-height: 0; }
    .cc-inner { max-width: none; padding: 0; }
    .cc-result p, .cc-own dd { color: #333; line-height: 1.5; }
    .cc-result a { color: inherit; text-decoration: none; }

    .cc-print-head { margin-bottom: 9mm; padding-bottom: 4mm; border-bottom: 0.5pt solid #999; }
    .cc-print-title { font-family: var(--font-display); font-size: 20pt; line-height: 1.2; color: #000; }
    .cc-print-meta { font-size: 9pt; color: #666; }

    .cc-situation-line { font-size: 10pt; margin-bottom: 3mm; }
    .cc-headline { font-size: 19pt; line-height: 1.25; margin-bottom: 4mm; }
    .cc-read { margin-bottom: 3mm; }

    .cc-also { margin-top: 6mm; padding: 0 0 0 4mm; background: none; border-left: 1pt solid #999; }
    .cc-block { margin-top: 7mm; padding-top: 0; border-top: none; }
    .cc-label { font-size: 8pt; color: #555; margin-bottom: 2mm; }
    .cc-big-question { font-size: 14pt; padding: 3mm 4mm; border: 1pt solid #888; }
    .cc-exercise { margin-top: 7mm; padding: 4mm 5mm; background: none; border: 0.5pt solid #aaa; border-radius: 0; }
    .cc-exercise-title { font-size: 13pt; margin-bottom: 1.5mm; color: #000; }
    .cc-exercise-text { font-size: 11.5pt; line-height: 1.5; }
    .cc-own dl { gap: 1mm; }
    .cc-own dd { margin-bottom: 3mm; }
    .cc-note { font-size: 10pt; }
    .cc-print-close { margin-top: 9mm; padding-top: 4mm; border-top: 0.5pt solid #999; font-size: 10.5pt; color: #000; }

    .cc-print-head, .cc-read-block, .cc-also, .cc-block, .cc-exercise, .cc-print-close { break-inside: avoid; }
    .cc-label, .cc-exercise-title, .cc-headline { break-after: avoid; }
}