/* CV Mojo app (v2): My first CV (CVC.cvCreate.first, app-firstcv.js), plus the next-steps banner
   it adds to the CV page and its card on the My CVs "Create new" tab.
   Classes are prefixed fc-; shared pieces (ap-*, btn, cvm-sticker, db-mark, cvx, tool-cost) come
   from app.css. Phone first: big tap targets (48px and up), 16px text in fields so phones don't
   zoom, one column. The live preview sits beside the question once the builder has room
   (a container query on the space it is given, not the window). */

.fc-wrap { container-type: inline-size; }
.fc-wrap [hidden] { display: none !important; }
.fc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

/* Single-column grids never grow past the card (long words, no-wrap rows). */
.fc-head, .fc-ticks, .fc-box-group, .fc-subs, .fc-quals, .fc-acts, .fc-act-body, .fc-lines, .fc-polish, .fc-options, .fc-sum, .fc-tips, .fc-tips ul, .fc-next-list { grid-template-columns: minmax(0, 1fr); }

/* ── Welcome and "carry on" screens ─────────────────────────────────────── */
.fc-intro { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: start; padding: 34px 28px 30px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 1px 2px rgba(25, 29, 59, .05), 0 2px 8px rgba(25, 29, 59, .04); }
.fc-intro::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--yellow); }
.fc-intro-ic { display: grid; place-items: center; width: 60px; height: 60px; color: var(--navy); background: var(--yellow); border-radius: 18px; transform: rotate(-6deg); }
.fc-intro .fc-lead { max-width: 60ch; }
.fc-ticks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fc-ticks li { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--navy); }
.fc-ticks svg { flex: none; color: var(--indigo); }
.fc-intro-go { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; }
.fc .btn.fc-big, .fc-intro .btn.fc-big { min-height: 56px; padding: 14px 28px; font-size: 17px; }
.fc-intro .ap-hint { margin: -4px 0 0; }

/* ── Top bar: step count, progress dots, saved note ──────────────────────── */
.fc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 14px 18px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.fc-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; font-size: 14px; font-weight: 800; color: var(--navy); }
.fc-count-n { font-weight: 600; color: var(--muted); }
.fc-dots { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fc-dots li { width: 10px; height: 10px; background: #d9dcef; border-radius: 999px; transition: width .25s ease, background-color .25s ease; }
.fc-dots li.is-done { background: var(--ok); }
.fc-dots li.is-now { width: 30px; background: var(--navy); box-shadow: 0 0 0 3px var(--yellow); }
.fc-top-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-left: auto; }
.fc-saved { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted); }
.fc-saved svg { color: var(--ok); }
.fc-peek { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 14px; font-weight: 700; text-decoration: none; }
.fc-foot { margin: 0; text-align: center; font-size: 14px; color: var(--muted); }
.fc-foot .ap-linkish { font-size: 14px; color: var(--muted); }
.fc-restart-q .ap-linkish { font-weight: 700; color: var(--indigo); }

/* ── Body: question card + "your CV so far" ──────────────────────────────── */
.fc-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.fc-side { display: none; order: -1; min-width: 0; }
.fc.is-peek .fc-side { display: block; }
.fc.is-check .fc-side, .fc.is-check .fc-peek { display: none !important; }
.fc-side-h { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--indigo); }
.fc-paper .cvx { font-size: 13.5px; }
.fc-paper .cvx-sub, .fc-paper .cvx-org, .fc-paper .cvx-name { overflow-wrap: anywhere; }
.fc-side .cvx-head { padding: 22px 24px 18px; }
.fc-side .cvx-name { font-size: 1.4rem; }
.fc-side .cvx-body { padding: 4px 24px 24px; }

.fc-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; padding: 30px 28px 24px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 1px 2px rgba(25, 29, 59, .05), 0 2px 8px rgba(25, 29, 59, .04); }
.fc-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--fc-accent, var(--yellow)); }
.fc-card--contact, .fc-card--skills, .fc-card--interests { --fc-accent: var(--cyan); }
.fc-card--school, .fc-card--done { --fc-accent: var(--channel); }
.fc-card--check { --fc-accent: var(--indigo); }
.fc-card.is-in { animation: fc-in .35s ease both; }
@keyframes fc-in { from { opacity: 0; transform: translateY(8px); } }

.fc-head { display: grid; gap: 8px; }
.fc-kicker { margin: 0; font-size: 14px; font-weight: 800; color: var(--indigo); }
.fc-h { margin: 0; font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--navy); }
.fc-h:focus { outline: none; }
.fc-lead { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }
.fc-h3 { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; color: var(--navy); }
.fc-opt { margin-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }

/* Fields: 16px text so phones don't zoom in; spacing comes from the card grid. */
.fc .ap-field + .ap-field { margin-top: 0; }
.fc .ap-field > label, .fc .ap-label { font-size: 15px; }
.fc .ap-input, .fc .ap-select, .fc .ap-textarea { min-height: 52px; font-size: 16px; }
.fc .ap-input::placeholder, .fc .ap-textarea::placeholder { color: #8a8eab; }
.fc-ta { min-height: 0; height: auto; line-height: 1.6; }
@supports (field-sizing: content) { .fc .fc-ta { field-sizing: content; min-height: 8em; max-height: 26em; } }
.fc-err { margin: 0; font-size: 14px; font-weight: 600; color: #b42318; }
.fc .ap-input[aria-invalid="true"], .fc .ap-textarea[aria-invalid="true"] { border-color: #d92d20; }
.fc-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.fc-len { font-size: 13px; font-weight: 700; color: var(--ok); }
.fc-len.is-short { color: var(--amber); }
.fc-readonly { display: flex; align-items: center; gap: 10px; min-height: 52px; margin: 0; padding: 12px 14px; font-size: 16px; color: var(--navy); overflow-wrap: anywhere; background: var(--mist); border-radius: 12px; }
.fc-readonly svg { flex: none; color: var(--indigo); }

/* Chips: bigger than the app default, with a tick once picked. */
.fc .fc-chips { gap: 8px; }
.fc .fc-chip { min-height: 44px; padding: 9px 16px; font-size: 15px; white-space: normal; text-align: left; }
.fc .fc-chip[aria-pressed="true"]::before { content: ''; flex: none; width: 5px; height: 10px; margin: -3px 2px 0 -2px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fc .fc-chip:focus-visible, .fc-goal:focus-visible, .fc-act-b:focus-visible, .fc-add:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; }

/* Step 1: what it's for. */
.fc-goals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fc-goal { position: relative; display: grid; align-content: start; justify-items: start; gap: 6px; min-height: 124px; padding: 16px 14px 14px; font: inherit; text-align: left; color: var(--navy); background: var(--mist); border: 2px solid transparent; border-radius: 18px; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.fc-goal:hover { border-color: #b9bde0; }
.fc-goal[aria-pressed="true"] { background: var(--yellow-soft); border-color: var(--navy); }
.fc-goal-ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 2px; color: var(--navy); background: #fff; border-radius: 12px; box-shadow: 0 4px 10px rgba(25, 29, 59, .08); }
.fc-goal b { font-size: 15.5px; line-height: 1.25; }
.fc-goal-d { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.fc-goal-tick { position: absolute; top: 10px; right: 10px; display: none; place-items: center; width: 26px; height: 26px; color: #fff; background: var(--navy); border-radius: 50%; }
.fc-goal[aria-pressed="true"] .fc-goal-tick { display: grid; }
.fc-role-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 14px 16px; font-size: 15px; color: var(--navy); background: var(--channel-soft); border-radius: 16px; }
.fc-role-line svg { flex: none; color: var(--indigo); }
.fc-role-line .ap-linkish { font-weight: 700; }

/* Notes and examples. */
.fc-note { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 14px 16px; font-size: 15px; line-height: 1.5; color: var(--navy); background: var(--mist); border-radius: 16px; }
.fc-note svg { flex: none; margin-top: 2px; color: var(--indigo); }
.fc-example { position: relative; margin-top: 6px; padding: 24px 18px 16px; background: var(--yellow-soft); border: 1.5px dashed #dfe57a; border-radius: 16px; }
.fc-example .cvm-sticker { top: -13px; left: 16px; right: auto; transform: rotate(-3deg); }
.fc-example p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--navy); }

/* Tick boxes ("I'm still at this school", "Predicted"). */
.fc-check { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--navy); cursor: pointer; }
.fc-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fc-box { display: grid; place-items: center; flex: none; width: 26px; height: 26px; color: transparent; background: #fff; border: 2px solid #b9bde0; border-radius: 8px; transition: background-color .15s ease, border-color .15s ease; }
.fc-check input:checked + .fc-box { color: #fff; background: var(--navy); border-color: var(--navy); }
.fc-check input:focus-visible + .fc-box { outline: 3px solid var(--indigo); outline-offset: 2px; }

/* School and college. */
.fc-box-group { display: grid; gap: 14px; padding: 18px; background: var(--mist); border-radius: 20px; }
.fc-box-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fc-box-group .ap-input, .fc-box-group .ap-select { background: #fff; }
.fc-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; padding: 12px 16px; font: inherit; font-size: 15.5px; font-weight: 700; color: var(--indigo); background: transparent; border: 2px dashed #b9bde0; border-radius: 18px; cursor: pointer; }
.fc-add:hover { background: var(--channel-soft); border-color: var(--indigo); }

/* GCSEs: one row per subject with a grade and a "predicted" tick. */
.fc-subs, .fc-quals { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fc-sub { display: grid; grid-template-columns: minmax(0, 1fr) 92px auto auto; align-items: center; gap: 4px 10px; padding: 8px 6px 8px 14px; background: var(--mist); border-radius: 16px; }
.fc-sub-n { min-width: 0; font-size: 15px; font-weight: 700; color: var(--navy); overflow-wrap: anywhere; }
.fc .fc-grade { min-height: 46px; padding: 8px 10px; background: #fff; }
.fc-sub .fc-check { font-size: 14px; }
.fc-qual { display: grid; gap: 8px; padding: 12px 12px 14px 14px; background: var(--mist); border-radius: 16px; }
.fc-qual-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; color: var(--navy); }
.fc-qual .ap-input { background: #fff; }
.fc-adder { display: flex; gap: 8px; }
.fc-adder .ap-input { flex: 1; min-width: 0; }
.fc-adder .btn { flex: none; min-height: 52px; }
.fc-divider { height: 0; border-top: 1px dashed var(--line); }
.fc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fc-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 14px; font-size: 15px; font-weight: 600; color: #fff; background: var(--navy); border-radius: 999px; }
.fc-tag button { display: grid; place-items: center; width: 36px; height: 36px; color: #fff; background: none; border: 0; border-radius: 50%; cursor: pointer; }
.fc-tag button:hover { background: rgba(255, 255, 255, .14); }
.fc-tally { margin: 0; font-size: 15px; font-weight: 700; color: var(--navy); }

/* Things you've done: big tick rows that open a few small questions. */
.fc-acts { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fc-act { overflow: hidden; background: var(--mist); border: 2px solid transparent; border-radius: 18px; transition: border-color .15s ease, background-color .15s ease; }
.fc-act.is-on { background: #fff; border-color: var(--navy); }
.fc-act-b { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 12px 16px; font: inherit; font-size: 16px; font-weight: 700; text-align: left; color: var(--navy); background: none; border: 0; cursor: pointer; }
.fc-act-box { display: grid; place-items: center; flex: none; width: 28px; height: 28px; color: transparent; background: #fff; border: 2px solid #b9bde0; border-radius: 9px; }
.fc-act-b[aria-pressed="true"] .fc-act-box { color: #fff; background: var(--ok); border-color: var(--ok); }
.fc-act-body { display: grid; gap: 14px; padding: 4px 16px 18px; }
.fc-act.is-on .fc-act-b { background: var(--yellow-soft); }
.fc-lines { display: grid; gap: 8px; }

/* About you: the AI polish. */
.fc-polish { display: grid; gap: 10px; padding: 16px; background: var(--channel-soft); border-radius: 18px; }
.fc-polish-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.fc-polish-row .btn { min-height: 48px; }
.fc-polish-row .btn svg { color: var(--indigo); }
.fc-polish-row .btn[aria-disabled="true"] { opacity: .7; cursor: progress; }
.fc-polish .ap-hint { margin: 0; }
.fc-polish-msg { margin: 0; font-size: 15px; font-weight: 600; color: var(--navy); }
.fc-options { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fc-options li { display: grid; gap: 10px; justify-items: start; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.fc-options p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--navy); }
.fc-polish > .ap-linkish { justify-self: start; font-weight: 700; }

/* Check it. */
.fc-paper--check .cvx { box-shadow: 0 16px 40px rgba(25, 29, 59, .1), 0 2px 6px rgba(25, 29, 59, .05); }
.fc-sum { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.fc-sum-i { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.fc-sum-i:last-child { border-bottom: 0; }
.fc-sum-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; color: var(--navy); background: var(--mist); border-radius: 10px; }
.fc-sum-t { flex: 1; min-width: 0; }
.fc-sum-t b { display: block; font-size: 14.5px; color: var(--navy); }
.fc-sum-t span { display: block; overflow: hidden; font-size: 13.5px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.fc-sum-i.is-empty .fc-sum-t span { font-style: italic; }
.fc-sum-i .ap-linkish { flex: none; min-height: 40px; padding: 0 4px; font-size: 14px; font-weight: 700; }
.fc-tips { display: grid; gap: 12px; padding: 18px; background: var(--yellow-soft); border-radius: 18px; }
.fc-tips ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fc-tips li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--navy); }
.fc-tip-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; color: var(--navy); background: #fff; border-radius: 9px; }

/* Back and Next. */
.fc-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; }
.fc-nav .btn { min-height: 54px; padding: 12px 22px; font-size: 16px; }
.fc-nav .fc-next { flex: 1 1 auto; max-width: 300px; margin-left: auto; }
.fc-save[aria-disabled="true"] { opacity: .75; cursor: progress; }

/* Room for the preview beside the question. */
@container (min-width: 960px) {
  .fc-body { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
  .fc-side { display: block; order: 0; position: sticky; top: calc(var(--header-h, 68px) + 20px); max-height: calc(100vh - var(--header-h, 68px) - 40px); overflow-y: auto; }
  .fc-peek { display: none; }
  .fc-card { padding: 36px 36px 28px; }
}
@container (min-width: 640px) {
  .fc-goals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fc-intro { padding: 44px 40px 38px; }
}
@container (max-width: 440px) {
  .fc-card, .fc-intro { padding: 26px 18px 20px; border-radius: 22px; }
  .fc-top { padding: 12px 14px; }
  .fc-goal { min-height: 132px; padding: 14px 12px 12px; }
  .fc-sub { grid-template-columns: minmax(0, 1fr) 84px auto; padding: 8px 6px 8px 12px; }
  .fc-sub .fc-check { grid-column: 1 / 3; grid-row: 2; min-height: 36px; }
  .fc-sub .ap-icon-btn { grid-column: 3; grid-row: 1; }
  .fc-nav .btn { padding: 12px 18px; }
  .fc-intro-go .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .fc-card.is-in { animation: none; } .fc-dots li { transition: none; } }

/* ── After saving: next steps on the CV page (/cv/{id}?first=1) ──────────── */
.fc-done { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 20px 0 4px; padding: 30px 26px 24px; background: var(--yellow-soft); border: 2px solid var(--navy); }
.fc-done .cvm-sticker { top: -13px; left: 22px; right: auto; transform: rotate(-3deg); }
.fc-done h2 { margin: 0; padding-right: 40px; font-size: clamp(1.3rem, 3.4vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.fc-done-lead { margin: 0; font-size: 15.5px; color: var(--muted); }
.fc-done-x { position: absolute; top: 12px; right: 12px; }
.fc-next-list { display: grid; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.fc-next-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; padding: 14px 16px; background: #fff; border-radius: 16px; }
.fc-next-n { display: grid; place-items: center; width: 34px; height: 34px; font-size: 15px; font-weight: 800; color: var(--navy); background: var(--yellow); border-radius: 50%; }
.fc-next-t b { display: block; font-size: 15.5px; color: var(--navy); }
.fc-next-t span { display: block; font-size: 14px; line-height: 1.45; color: var(--muted); }
.fc-next-list .btn { min-height: 46px; white-space: nowrap; }
.fc-done .ap-hint { margin: 2px 0 0; }
@media (max-width: 640px) {
  .fc-done { padding: 28px 18px 20px; }
  .fc-next-list li { grid-template-columns: auto minmax(0, 1fr); }
  .fc-next-list .btn { grid-column: 1 / -1; justify-content: center; }
}

/* ── My CVs, "Create new": the "My first CV" card above the other ways ───── */
.mc-first { margin-bottom: 8px; }
.mc-first .mc-method { width: 100%; }
@media (min-width: 720px) {
  .mc-first .mc-method { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 18px; }
  .mc-first .mc-method .db-path-ic { grid-column: 1; grid-row: 1 / span 3; margin-bottom: 0; }
  .mc-first .mc-method > b, .mc-first .mc-method > .db-path-d, .mc-first .mc-method > .mc-method-meta { grid-column: 2; }
  .mc-first .mc-method .db-path-go { grid-column: 3; grid-row: 1 / span 3; margin: 0; }
}