/* ===========================================================================
   PF-CUES — 2026-09-11 · THE TWO PIECES EVERY TOOL SHARES

   Founder (2026-09-11): "in each tool, we should suggest to use other tool if
   they haven't, and their resume if we have it should carry in all and keep
   option use existing one or upload new one."

   So there are exactly two shared objects, and they live here rather than in
   any one tool's sheet:

     .pf-cues   the next-tool band — up to three doors, computed from state,
                never a static advertisement.
     .pf-src    the résumé source strip — the same question, the same cards and
                the same states in the letter, the check and the portfolio.

   Both are built on the sheet grammar (.cxs-source, .cxs-btn) that pf-portfolio
   .css already owns, so removing this link degrades them to that grammar rather
   than breaking them. Tokens only; no new hues.
   ========================================================================= */

/* ------------------------------------------------------------- THE CUE BAND */
.folio-v5 .pf-cues {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.folio-v5 .pf-cues-block { margin: 28px 0 0; padding-top: 20px; border-top: 1px dashed var(--cx-cons-hair); }
.folio-v5 .pf-cues-head {
  display: block; margin: 0 0 12px;
  color: var(--cx-cons-faint); font: 500 11px/1 var(--cx-font-mono);
  letter-spacing: .12em; text-transform: uppercase;
}
.folio-v5 .pf-cue {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 16px;
  align-items: center; gap: 12px;
  min-height: 64px; padding: 13px 15px;
  border: 1px solid var(--cx-cons-hair); border-radius: 10px;
  background: var(--cx-cons-paper); color: var(--cx-cons-char);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.folio-v5 .pf-cue > i { display: grid; place-items: center; color: var(--cx-cons-char); }
.folio-v5 .pf-cue > i svg { width: 20px; height: 20px; }
.folio-v5 .pf-cue > span { display: grid; gap: 2px; min-width: 0; }
.folio-v5 .pf-cue b {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--cx-ink); font: 500 15px/1.25 var(--cx-font-ui);
}
.folio-v5 .pf-cue small { color: var(--cx-cons-char); font: 400 12.5px/1.4 var(--cx-font-ui); }
.folio-v5 .pf-cue > em { color: var(--cx-cons-faint); font: 400 15px/1 var(--cx-font-ui); font-style: normal; }
.folio-v5 .pf-cue:hover {
  border-color: var(--cx-ink); background: var(--cx-cons-parchment);
  box-shadow: inset 3px 0 0 var(--cx-cons-vermilion);
}
.folio-v5 .pf-cue:hover > em { color: var(--cx-cons-vermilion-deep); }
.folio-v5 .pf-cue:focus-visible { outline: 2px solid var(--cx-ink); outline-offset: 2px; }

/* the cue band inside a dark/ink foot (ATS 02, portfolio 03) keeps the paper
   card — the foot is a rule, not a ground, on every one of these pages. */
.folio-v5 .pf-check-foot .pf-cues,
.folio-v5 .pf-ck-foot .pf-cues { grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: 8px; }
.folio-v5 .pf-check-foot .pf-cue,
.folio-v5 .pf-ck-foot .pf-cue { min-height: 44px; padding: 8px 12px; }
.folio-v5 .pf-check-foot .pf-cue b,
.folio-v5 .pf-ck-foot .pf-cue b { font-size: 13.5px; }
.folio-v5 .pf-check-foot .pf-cue small,
.folio-v5 .pf-ck-foot .pf-cue small { font-size: 11.5px; }

/* the preview's own foot — the moment the document is finished being read. */
.folio-v5 .resume-preview-foot { padding: 14px 18px; border-top: 1px solid var(--cx-cons-hair); background: var(--cx-cons-parchment); }
.folio-v5 .resume-preview-foot:empty { display: none; }

/* ------------------------------------------------------ THE SOURCE STRIP
   One design in three tools. The card is the check page's pick, promoted:
   icon · title + facts · state mark. .cxs-source gives it the dashed parchment
   ground; everything below is the grid the three-column card needs. */
.folio-v5 .pf-src { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 16px; }
/* 2026-09-11 (late) · FOUNDER: "I feel big boxes, reduce a bit." ONE STEP DOWN,
   on the SHARED rule, so the check 01, the letter 02 and the portfolio 02 keep
   reading as one size: padding −25% (14/16 → 10/12), min-height 76 → 64, the
   icon 22 → 20 with its column, and the fact line's leading 1.45 → 1.4. A card
   with two lines of body now stands 78px on desktop, three lines 96px. */
.folio-v5 .cxs-source.pf-src-pick {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 20px;
  align-items: center; gap: 12px;
  width: 100%; min-height: 64px; margin: 0; padding: 10px 12px;
  border: 1px dashed var(--cx-cons-faint); border-radius: 10px;
  background: var(--cx-cons-parchment);
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.folio-v5 .cxs-source.pf-src-pick > i { display: grid; place-items: center; color: var(--cx-cons-char); }
.folio-v5 .cxs-source.pf-src-pick > i svg { width: 20px; height: 20px; }
.folio-v5 .cxs-source.pf-src-pick > span { display: grid; gap: 2px; min-width: 0; }
.folio-v5 .cxs-source.pf-src-pick b {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--cx-ink); font: 500 16px/1.25 var(--cx-font-ui);
}
.folio-v5 .cxs-source.pf-src-pick small { color: var(--cx-cons-char); font: 400 12.5px/1.38 var(--cx-font-ui); }
.folio-v5 .cxs-source.pf-src-pick > strong { color: var(--cx-cons-faint); font: 400 15px/1 var(--cx-font-ui); }
.folio-v5 .cxs-source.pf-src-pick:hover { border-style: solid; border-color: var(--cx-cons-hair); background: var(--cx-cons-paper); }
.folio-v5 .cxs-source.pf-src-pick.on {
  border-style: solid; border-color: var(--cx-ink);
  background: var(--cx-cons-paper);
  box-shadow: inset 3px 0 0 var(--cx-cons-vermilion);
}
.folio-v5 .cxs-source.pf-src-pick.on > strong { color: var(--cx-cons-vermilion-deep); }
.folio-v5 .cxs-source.pf-src-pick:focus-visible { outline: 2px solid var(--cx-ink); outline-offset: 2px; }
/* the door form — nothing saved yet. It is a door, never a disabled grey box. */
.folio-v5 .cxs-source.pf-src-pick.pf-src-door > strong { color: var(--cx-cons-vermilion-deep); }

.folio-v5 .pf-src-note { margin: 12px 0 0; color: var(--cx-cons-char); font: 400 13px/1.5 var(--cx-font-ui); }
.folio-v5 .pf-src-note > button {
  min-height: 40px; padding: 0 4px; border: 0; background: none;
  color: var(--cx-cons-vermilion-deep); font: 500 13px/1.4 var(--cx-font-ui);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.folio-v5 .pf-src-note > button:hover { color: var(--cx-ink); }

/* --------------------------------------------- 03 · THE VOICE CHIPS (A2)
   The same three tones the 02 sheet offers, compact, in the paper's own bar. */
.folio-v5 .pfl-voice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.folio-v5 .pfl-voice-label { color: var(--cx-cons-faint); font: 500 11px/1 var(--cx-font-mono); letter-spacing: .12em; text-transform: uppercase; }
.folio-v5 .pfl-voice-chip {
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--cx-cons-hair); border-radius: 999px;
  background: var(--cx-cons-paper); color: var(--cx-cons-char);
  font: 500 13px/1 var(--cx-font-ui); cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.folio-v5 .pfl-voice-chip:hover { border-color: var(--cx-ink); color: var(--cx-ink); }
.folio-v5 .pfl-voice-chip.on { border-color: var(--cx-ink); background: var(--cx-ink); color: var(--cx-cons-paper); }
.folio-v5 .pfl-voice-chip.pending { border-color: var(--cx-cons-vermilion); color: var(--cx-cons-vermilion-deep); }
.folio-v5 .pfl-voice-chip:focus-visible { outline: 2px solid var(--cx-ink); outline-offset: 2px; }
.folio-v5 .pfl-voice-confirm {
  display: grid; gap: 10px; width: 100%; margin-top: 10px; padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--cx-cons-vermilion) 34%, var(--cx-cons-hair));
  border-left-width: 3px; border-left-color: var(--cx-cons-vermilion);
  border-radius: 10px; background: var(--cx-cons-parchment);
}
.folio-v5 .pfl-voice-confirm b { color: var(--cx-ink); font: 500 14.5px/1.35 var(--cx-font-ui); }
.folio-v5 .pfl-voice-confirm span { color: var(--cx-cons-char); font: 400 13px/1.5 var(--cx-font-ui); }
.folio-v5 .pfl-voice-confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------- THE ATS RETURN STRIP IN THE RÉSUMÉ (A3)
   You came here from a report, and the way back is one line at the top of the
   column you were sent to edit. It never survives a reload — it is a statement
   about this arrival, not a setting. */
.folio-v5 .pf-ats-return {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin: 0 0 16px; padding: 11px 14px;
  border: 1px solid var(--cx-cons-hair); border-left: 3px solid var(--cx-cons-vermilion);
  border-radius: 10px; background: var(--cx-cons-parchment);
  color: var(--cx-cons-char); font: 400 13px/1.4 var(--cx-font-ui);
}
.folio-v5 .pf-ats-return b { color: var(--cx-ink); font-weight: 600; }
.folio-v5 .pf-ats-return-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.folio-v5 .pf-ats-return-actions > button {
  min-height: 40px; padding: 0 12px;
  border: 1px solid var(--cx-cons-hair); border-radius: 8px;
  background: var(--cx-cons-paper); color: var(--cx-ink);
  font: 500 13px/1 var(--cx-font-ui); cursor: pointer;
}
.folio-v5 .pf-ats-return-actions > button:hover { border-color: var(--cx-ink); }
.folio-v5 .pf-ats-return-dismiss {
  min-width: 40px; min-height: 40px; padding: 0; border: 0; background: none;
  color: var(--cx-cons-faint); font: 400 18px/1 var(--cx-font-ui); cursor: pointer;
}
.folio-v5 .pf-ats-return-dismiss:hover { color: var(--cx-ink); }

/* ------------------------------------------------------------------- PHONE */
@media (max-width: 720px) {
  .folio-v5 .pf-cues,
  .folio-v5 .pf-check-foot .pf-cues,
  .folio-v5 .pf-ck-foot .pf-cues,
  .folio-v5 .pf-src { grid-template-columns: minmax(0, 1fr); }
  .folio-v5 .pf-cue { min-height: 56px; }
  /* LAW: a late override must restate every tier it touches. The card keeps the
     reduced box on the phone, and every quiet door there is a 44px target. */
  .folio-v5 .cxs-source.pf-src-pick { min-height: 64px; padding: 10px 12px; }
  .folio-v5 .pf-src-note > button { min-height: 44px; }
  .folio-v5 .pf-ats-return-actions { margin-left: 0; width: 100%; }
  .folio-v5 .pf-ats-return-actions > button { flex: 1 1 auto; }
  .folio-v5 .pfl-voice { width: 100%; }
  .folio-v5 .pfl-voice-chip { flex: 1 1 auto; }
}