/* fit-check.css: "Check one idea".
   Builds on theme.css for colour, type, buttons and the navy bar. One column, one question at a time.
   Mobile first, 16px side gutter. The only filled things on the page are the answer you give and the verdict. */



a:focus-visible,
button:focus-visible,
.fc-linklike:focus-within,
.fc-field:focus-visible,
.fc-else-text:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }


/* ---------- frame ---------- */

.fc-wrap { max-width: 66rem; margin: 0 auto; padding: 0 16px; }

.fc-top {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    align-items: baseline;
    justify-content: space-between;
    padding: 14px 0;
    font-size: 0.95rem;
}
.fc-home:hover { text-decoration: underline; }

/* the question sits on one white card with a navy top edge */
.fc-main {
    max-width: 40rem;
    margin: 24px auto auto;
    padding: 24px 18px 32px;
    background: var(--card);
    border: 1px solid var(--line);
    border-top: 4px solid var(--navy);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}
.fc-main:focus { outline: none; }

.fc-foot { width: 100%; max-width: 40rem; margin: 48px auto 0; padding: 22px 0 36px; font-size: 0.9rem; }
.fc-foot p { margin: 0 0 6px; }

.fc-status { min-height: 1.5rem; margin: 12px 0 0; color: var(--muted); font-size: 0.9rem; }

/* ---------- type ---------- */

.fc-title {
    margin: 0 0 12px;
    font: 700 clamp(2rem, 7vw, 3rem)/1.05 var(--serif);
    letter-spacing: -0.02em;
    color: var(--navy);
}
.fc-title:focus, .fc-q:focus, .fc-verdict-name:focus { outline: none; }

.fc-lead { margin: 0 0 24px; font-size: 1.1rem; max-width: 34rem; }
.fc-hint { margin: 6px 0 0; color: var(--muted); font-size: 0.9rem; }
.fc-hint + .fc-lead { margin-top: 16px; }
.fc-error { margin: 8px 0 0; color: var(--danger); font-weight: 600; }
.fc-section { margin: 20px 0 6px; color: var(--muted); font-size: 0.95rem; }

/* ---------- entry ---------- */

.fc-field-label { display: block; margin: 8px 0 4px; font: 700 1.15rem/1.3 var(--serif); }

.fc-field {
    display: block;
    width: 100%;
    min-height: 7.5rem;
    padding: 10px 2px 12px;
    border: 0;
    border-bottom: 2px solid var(--navy);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font: 400 clamp(1.15rem, 4vw, 1.4rem)/1.4 var(--sans);
    resize: vertical;
}
.fc-field::placeholder { color: var(--muted); opacity: 0.85; }

.fc-chips-block { margin: 28px 0 0; }
.fc-chips-label { margin: 0 0 8px; color: var(--muted); font-size: 0.95rem; }
.fc-narrow { margin-top: 16px; padding-left: 12px; border-left: 3px solid var(--navy); }

.fc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.fc-chip {
    appearance: none;
    padding: 8px 14px;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}
.fc-chip:hover { border-color: var(--navy); background: var(--tint); }
.fc-chip[aria-pressed="true"] { border-color: var(--navy); background: var(--tint-strong); box-shadow: inset 3px 0 0 var(--green); }

.fc-resume { margin: 28px 0 0; padding: 12px 14px; background: var(--tint); border-radius: 4px; }
.fc-file { margin: 24px 0 0; font-size: 0.95rem; }
.fc-linklike {
    position: relative;
    display: inline-block;
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}
.fc-linklike input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }

/* ---------- match ---------- */

.fc-yours { margin: 0 0 12px; padding: 0 0 0 14px; border-left: 3px solid var(--line); color: var(--muted); }
.fc-yours-text { color: var(--ink); font-size: 1.1rem; white-space: pre-line; }

.fc-matches { display: grid; gap: 12px; margin: 0 0 8px; padding: 0; list-style: none; }

.fc-match {
    appearance: none;
    display: block;
    width: 100%;
    padding: 18px 18px 16px;
    border: 1px solid var(--line);
    border-top: 4px solid var(--navy);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    background: var(--card);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.fc-match:hover { border-color: var(--navy); background: var(--tint); }
.fc-match-go { color: var(--green-dark); }
.fc-match-name { display: block; font: 700 1.25rem/1.2 var(--serif); color: var(--navy); }
.fc-match-what { display: block; margin-top: 6px; }
.fc-match-go { display: block; margin-top: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- questions ---------- */

.fc-meta { display: flex; flex-wrap: wrap; gap: 2px 16px; justify-content: space-between; align-items: baseline; margin: 0 0 8px; }
.fc-where { margin: 0; color: var(--muted); font-size: 0.95rem; }
.fc-where b { color: var(--ink); font-weight: 600; }
.fc-left { margin: 0; color: var(--muted); font-size: 0.95rem; font-variant-numeric: tabular-nums; }

.fc-main > .acts, #fcRoot > .acts { margin: 0 0 18px; }

.fc-stage-intro { margin: 8px 0 16px; padding-left: 12px; border-left: 3px solid var(--navy); color: var(--muted); max-width: 32rem; }

.fc-q {
    margin: 12px 0 8px;
    font: 700 clamp(1.45rem, 4.6vw, 2rem)/1.2 var(--serif);
    letter-spacing: -0.01em;
}
.fc-help { margin: 0 0 8px; color: var(--muted); max-width: 34rem; }
.fc-note { margin: 0 0 8px; padding: 8px 12px; background: var(--tint); border-radius: 4px; font-size: 0.9rem; }

.fc-sensitive { margin: 12px 0 16px; padding: 12px 14px; background: var(--v-no-bg); border-left: 4px solid var(--v-no); border-radius: 0 4px 4px 0; }
.fc-sensitive p { margin: 0; }

.fc-opts { margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.fc-opts li { border-bottom: 1px solid var(--line); }

.fc-opt {
    appearance: none;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    width: 100%;
    min-height: 56px;
    padding: 14px 6px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 1.05rem;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}
.fc-opt:hover { background: var(--tint); }
.fc-opt:focus-visible { outline-offset: -3px; }
.fc-opt[aria-pressed="true"] { background: var(--tint-strong); }
.fc-opt-mark {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 2px solid var(--navy);
    border-radius: 50%;
}
.fc-opt[aria-pressed="true"] .fc-opt-mark { background: var(--navy); box-shadow: inset 0 0 0 4px var(--bg); }
.fc-opt-none { color: var(--muted); }

.fc-else { margin: 0 6px 14px 42px; }
.fc-else[hidden] { display: none; }
.fc-else-text {
    display: block;
    width: 100%;
    min-height: 4.5rem;
    padding: 8px 10px;
    border: 1px solid var(--navy);
    border-radius: 4px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 1.05rem;
    line-height: 1.4;
    resize: vertical;
}
.fc-else-text::placeholder { color: var(--muted); }
.fc-else .fc-actions { margin-top: 10px; }
.fc-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.fc-didyoumean { margin: 0; font-size: 1.1rem; font-weight: 600; }

.fc-nav { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 22px 0 0 -10px; }

/* ---------- buttons ---------- */

.fc-btn {
    appearance: none;
    display: inline-block;
    min-height: 44px;
    padding: 9px 18px;
    border: 2px solid var(--btn-bg);
    border-radius: var(--radius-sm);
    background: var(--btn-bg);
    color: var(--btn-ink);
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.fc-btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); color: var(--btn-ink); }
.fc-btn.alt { background: #ffffff; color: var(--navy); border-color: var(--navy); }
.fc-btn.alt:hover { background: var(--tint); border-color: var(--navy); color: var(--navy); }
.fc-btn.quiet {
    min-height: 44px;
    padding: 9px 10px;
    border-color: transparent;
    background: transparent;
    color: var(--link);
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.fc-btn.quiet:hover { background: var(--tint); border-color: transparent; color: var(--link); }

.fc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.fc-actions-col { flex-direction: column; align-items: stretch; gap: 18px; }
.fc-act .fc-btn { width: 100%; }
.fc-act .fc-hint { margin-top: 4px; }

/* ---------- verdict ---------- */

.fc-verdict-name {
    margin: 4px 0 18px;
    font: 700 clamp(2.1rem, 8vw, 3.4rem)/1.05 var(--serif);
    letter-spacing: -0.02em;
}

.fc-verdict {
    --v: var(--v-none);
    --vbg: var(--v-none-bg);
    margin: 0 0 20px;
    padding: 16px 18px 6px;
    background: var(--vbg);
    border-left: 6px solid var(--v);
    border-radius: 0 4px 4px 0;
}
.fc-verdict[data-verdict="yes"] { --v: var(--v-yes); --vbg: var(--v-yes-bg); }
.fc-verdict[data-verdict="yes-with-conditions"] { --v: var(--v-cond); --vbg: var(--v-cond-bg); }
.fc-verdict[data-verdict="not-yet"] { --v: var(--v-wait); --vbg: var(--v-wait-bg); }
.fc-verdict[data-verdict="no-simpler"],
.fc-verdict[data-verdict="no-viable"] { --v: var(--v-no); --vbg: var(--v-no-bg); }

.fc-h { margin: 0 0 2px; font: 700 0.95rem/1.3 var(--sans); }
.fc-reason { margin: 0 0 14px; font-size: 1.05rem; }
.fc-why { margin: 0 0 14px; }
.fc-why .fc-reason { margin-bottom: 4px; }
.fc-lines { margin: 0 0 4px; padding-left: 1.2rem; }
.fc-lines li { margin: 2px 0; }
.fc-links a { margin-left: 4px; }
.fc-next { margin: -6px 0 14px; padding-left: 1.2rem; }
.fc-next li { margin: 2px 0; }

/* ---------- wider screens ---------- */

@media (min-width: 40rem) {
    .fc-wrap { padding: 0 32px; }
    .fc-main { margin-top: 40px; padding: 36px 40px 40px; }
    .fc-actions-col { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
    .fc-act { flex: 1 1 15rem; }
}

@media print {
    .fc-top, .fc-nav, .fc-actions, .fc-foot, .fc-status { display: none; }
}