/* CV Mojo app: "Fix my CV for me" dialog (assets/site/app-fixcv.js), in the v3 look.
   Reads the v3 tokens from assets/site/v3/app-v3.css when it is loaded, with plain fallbacks for the
   ?v3=0 opt-out. Removed words are tangerine and struck through, added words mint, placeholders
   sunshine with a dashed edge; every change also has a text label for screen readers. */

.fx-dlg {
  width: min(1080px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 32px); margin: auto; padding: 0; overflow: auto;
  color: var(--text, #1D1A26); background: var(--paper, #FFFDF8); border: 0; border-radius: 28px;
  box-shadow: 0 30px 70px rgba(30, 42, 90, .3); overscroll-behavior: contain;
}
.fx-dlg::backdrop { background: rgba(30, 42, 90, .45); }
.fx-dlg.is-fallback { position: fixed; inset: 0; z-index: 500; height: fit-content; box-shadow: 0 0 0 100vmax rgba(30, 42, 90, .45); }
.fx-dlg[open] { animation: fx-pop .2s ease; }
@keyframes fx-pop { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.fx-frame { position: relative; }
.fx-body { padding: 32px 36px 28px; }
.fx-body:focus, .fx-body h2:focus { outline: none; }
.fx-x { position: absolute; z-index: 3; top: 16px; right: 16px; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; color: var(--navy, #1E2A5A); background: var(--cream, #FFF6E0); border: 0; border-radius: 50%; cursor: pointer; }
.fx-x:hover { background: #F6E7C4; }
.fx-x:focus-visible, .fx-dlg button:focus-visible { outline: 3px solid var(--navy, #1E2A5A); outline-offset: 3px; }

/* Heading */
.fx-head { display: flex; align-items: center; gap: 16px; margin: 0 56px 22px 0; }
.fx-ic { position: relative; isolation: isolate; flex: none; display: grid; place-items: center; width: 56px; height: 56px; color: var(--navy, #1E2A5A); transform: rotate(-6deg); }
.fx-ic::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--sun, #FFC93C); border-radius: 50% 46% 52% 48%; -webkit-mask: var(--v-blob-a) center / 100% 100% no-repeat; mask: var(--v-blob-a) center / 100% 100% no-repeat; }
.fx-ic--ok { color: var(--teal-t, #13705F); }
.fx-ic--ok::before { background: var(--mint, #CDEDE4); }
.fx-ic--warn { color: var(--tang-t, #B34A00); }
.fx-ic--warn::before { background: #FFD9BF; }
.fx-kicker { margin: 0 0 4px; font-family: var(--v-slab, Georgia, serif); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--tang-t, #B34A00); }
/* !important: the SPA shrinks every h2 to 1.15rem on phones (index.php). */
.fx-dlg h2 { margin: 0; font-family: var(--v-display, inherit); font-size: 46px !important; font-weight: 400; line-height: .92; letter-spacing: .01em; text-transform: uppercase; color: var(--navy, #1E2A5A); -webkit-text-stroke: .02em currentColor; }
.fx-dlg h3 { margin: 0 0 12px; font-family: var(--v-display, inherit); font-size: 30px; font-weight: 400; line-height: 1; text-transform: uppercase; color: var(--navy, #1E2A5A); }
.fx-dlg h4 { margin: 0 0 10px; font-size: 16px; font-weight: 900; color: var(--navy, #1E2A5A); }
.fx-dlg p { margin: 0; }

/* Intro */
.fx-fixlist { display: grid; margin: 0 0 22px; padding: 0; list-style: none; counter-reset: fx; }
.fx-fixlist li { position: relative; padding: 11px 0 11px 50px; font-size: 16px; line-height: 1.5; counter-increment: fx; border-top: 2px dashed #E6E0D2; }
.fx-fixlist li:first-child { border-top: 0; }
.fx-fixlist li::before { content: counter(fx); position: absolute; left: 0; top: 8px; display: grid; place-items: center; width: 34px; height: 34px; padding-top: 2px; font-family: var(--v-display, inherit); font-size: 21px; font-weight: 700; color: var(--navy, #1E2A5A); background: var(--sun, #FFC93C); border-radius: 50%; transform: rotate(-6deg); }
.fx-promise { display: grid; gap: 10px; margin: 0 0 18px; padding: 18px 20px; list-style: none; background: var(--cream, #FFF6E0); border-radius: 20px; }
.fx-promise li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.55; }
.fx-promise li::before { content: ''; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; background: var(--teal, #1F9E89); border-radius: 50%; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1.8 15.5L5.6 12l1.8-1.8 2.8 2.8 6.4-6.4 1.8 1.8z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1.8 15.5L5.6 12l1.8-1.8 2.8 2.8 6.4-6.4 1.8 1.8z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.fx-promise b { color: var(--navy, #1E2A5A); }
.fx-promise mark.fx-ph { white-space: nowrap; }
.fx-cost { display: flex; align-items: center; gap: 6px; margin: 0 0 4px !important; font-size: 14.5px; font-weight: 800; color: var(--gold-t, #8A5A00); }
.fx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; }
.fx-actions .btn { white-space: normal; }
.fx-hint { flex: 1 1 220px; font-size: 14px; color: var(--muted, #5D5869); }

/* Placeholders */
mark.fx-ph { padding: 0 4px; font-weight: 800; color: var(--navy, #1E2A5A); background: #FFE59A; border-radius: 6px; box-shadow: inset 0 0 0 2px #E9A01A; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Working */
.fx-working { display: grid; justify-items: center; gap: 12px; padding: 34px 8px 26px; text-align: center; }
.fx-working h2 { font-size: 44px !important; }
.fx-sheet { margin-bottom: 6px; }
.fx-stage { min-height: 1.5em; font-size: 17px; font-weight: 800; color: var(--navy, #1E2A5A); }
.fx-bar { display: block; width: min(460px, 100%); height: 12px; overflow: hidden; background: var(--sky, #CFE8F6); border-radius: 999px; }
.fx-bar i { display: block; width: 0; height: 100%; background: repeating-linear-gradient(-45deg, var(--navy, #1E2A5A) 0 10px, #2E3C72 10px 20px); border-radius: 999px; }
.fx-wait { max-width: 440px; font-size: 14.5px; color: var(--muted, #5D5869); }

/* Score */
.fx-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 28px; align-items: center; margin: 0 0 18px; padding: 22px 26px; background: var(--cream, #FFF6E0); border-radius: 24px; }
.fx-score--up { background: var(--mint, #CDEDE4); }
.fx-score--down { background: #FFE3D1; }
.fx-nums { display: flex; align-items: center; gap: 12px; }
.fx-num { display: grid; justify-items: center; gap: 2px; min-width: 84px; padding: 10px 12px 8px; background: var(--paper, #FFFDF8); border-radius: 20px; }
.fx-num small { font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #5D5869); }
.fx-num b { font-family: var(--v-display, inherit); font-size: 58px; font-weight: 400; line-height: .9; color: var(--navy, #1E2A5A); }
.fx-num--after { color: var(--cream, #FFF6E0); background: var(--navy, #1E2A5A); }
.fx-num--after small { color: var(--on-navy, #D9E1F2); }
.fx-num--after b { color: var(--cream, #FFF6E0); }
.fx-arrow { display: grid; place-items: center; color: var(--navy, #1E2A5A); }
.fx-delta { padding: 6px 12px 4px; font-family: var(--v-display, inherit); font-size: 28px; line-height: 1; color: var(--navy, #1E2A5A); background: var(--paper, #FFFDF8); border-radius: 999px; transform: rotate(-4deg); }
.fx-score--up .fx-delta { background: var(--sun, #FFC93C); }
.fx-score-text { display: grid; gap: 6px; font-size: 15px; line-height: 1.5; }
.fx-score-h { font-size: 19px; font-weight: 900; color: var(--navy, #1E2A5A); }
.fx-score-note { font-size: 13.5px; color: var(--muted, #5D5869); }
.fx-phnote { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px !important; padding: 14px 18px; font-size: 15px; line-height: 1.5; background: #FFF0C2; border-radius: 18px; }
.fx-phnote > svg { flex: none; margin-top: 2px; color: var(--gold-t, #8A5A00); }
.fx-phnote b { color: var(--navy, #1E2A5A); }

/* What we did */
.fx-did { margin: 0 0 22px; }
.fx-did ol { display: grid; margin: 0; padding: 0; list-style: none; }
.fx-did li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 2px dashed #E6E0D2; }
.fx-did li:first-child { border-top: 0; }
.fx-did-n { display: grid; place-items: center; width: 30px; height: 30px; padding-top: 2px; font-family: var(--v-display, inherit); font-size: 19px; color: var(--navy, #1E2A5A); background: var(--sky, #CFE8F6); border-radius: 50%; }
.fx-did-applied .fx-did-n { background: var(--mint, #CDEDE4); }
.fx-did-not_applied .fx-did-n { background: #FFD9BF; }
.fx-did-fix { font-size: 15.5px; font-weight: 700; line-height: 1.5; }
.fx-did-res { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 6px !important; font-size: 14.5px; line-height: 1.5; color: var(--muted, #5D5869); }
.fx-did-res .cvm-status { flex: none; }

/* Every change */
.fx-changes { margin: 0 0 6px; }
.fx-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: -2px 0 14px !important; font-size: 13.5px; font-weight: 800; color: var(--muted, #5D5869); }
.fx-key { display: inline-flex; align-items: center; gap: 6px; }
.fx-key::before { content: ''; width: 16px; height: 12px; border-radius: 4px; }
.fx-key--del::before { background: #FFD3B8; }
.fx-key--add::before { background: #BDE8DB; }
.fx-key--ph::before { background: #FFE59A; box-shadow: inset 0 0 0 2px #E9A01A; }
.fx-sec { margin: 0 0 16px; padding: 18px 20px 14px; background: var(--paper, #FFFDF8); border-radius: 20px; box-shadow: inset 0 0 0 2px var(--line, #EDE4CB); }
.fx-grid { display: grid; }
.fx-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fx-row + .fx-row { border-top: 1px solid #F1EAD8; }
.fx-cell { padding: 8px 12px; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.fx-cell--a { border-right: 2px solid #F1EAD8; }
.fx-row--head .fx-cell { padding-top: 0; font-size: 12px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--muted, #5D5869); }
.fx-row--head + .fx-row { border-top: 0; }
.fx-row.is-same .fx-cell { color: var(--muted, #5D5869); }
.fx-row.is-mod .fx-cell--a, .fx-row.is-del .fx-cell--a { background: #FFF1E7; }
.fx-row.is-mod .fx-cell--b, .fx-row.is-add .fx-cell--b { background: #EAF7F2; }
.fx-cell del { color: #8E3A08; text-decoration: line-through; text-decoration-color: rgba(179, 74, 0, .7); text-decoration-thickness: 2px; background: #FFD3B8; border-radius: 4px; }
.fx-cell ins { color: #0F4F43; text-decoration: none; background: #BDE8DB; border-radius: 4px; }
.fx-cell ins mark.fx-ph, .fx-cell del mark.fx-ph { background: #FFE59A; }
.fx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fx-chip { padding: 4px 11px 3px; font-size: 14px; font-weight: 700; color: var(--navy, #1E2A5A); background: #F6EDD6; border-radius: 999px; }
.fx-chip.is-del { color: #8E3A08; text-decoration: line-through; background: #FFD3B8; }
.fx-chip.is-add { color: #0F4F43; background: #BDE8DB; }
.fx-chip.is-phchip { background: #FFF0C2; box-shadow: inset 0 0 0 2px #E9A01A; }
.fx-chip mark.fx-ph { padding: 0; background: none; box-shadow: none; }
.fx-unchanged { font-size: 14.5px; color: var(--muted, #5D5869); }
.fx-unchanged b { color: var(--navy, #1E2A5A); }

/* Keep / Discard stay in view while the changes scroll. */
.fx-actions--end { position: sticky; bottom: 0; z-index: 2; margin: 18px -36px -28px; padding: 16px 36px 20px; background: var(--paper, #FFFDF8); box-shadow: 0 -12px 22px -12px rgba(30, 42, 90, .22); border-radius: 0 0 28px 28px; }

/* Done and errors */
.fx-done, .fx-err { display: grid; justify-items: center; gap: 12px; padding: 30px 8px 12px; text-align: center; }
.fx-done p, .fx-err p { max-width: 520px; font-size: 16px; line-height: 1.55; }
.fx-done .fx-actions, .fx-err .fx-actions { justify-content: center; }

@media (max-width: 720px) {
  .fx-dlg { width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .fx-body { padding: 24px 18px 22px; }
  .fx-x { top: 12px; right: 12px; }
  .fx-head { margin-right: 48px; gap: 12px; }
  .fx-ic { width: 46px; height: 46px; }
  .fx-dlg h2, .fx-working h2 { font-size: 36px !important; }
  .fx-dlg h3 { font-size: 26px; }
  .fx-score { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .fx-num { min-width: 72px; }
  .fx-num b { font-size: 48px; }
  .fx-sec { padding: 14px 12px 10px; }
  /* One column: unchanged lines once, changed lines as before then after. */
  .fx-row { grid-template-columns: minmax(0, 1fr); }
  .fx-row--head { display: none; }
  .fx-cell--a { border-right: 0; }
  .fx-cell--empty, .fx-row.is-same .fx-cell--a { display: none; }
  .fx-row.is-mod .fx-cell::before, .fx-grid--chips .fx-cell::before { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: var(--muted, #5D5869); }
  .fx-row.is-mod .fx-cell--a::before, .fx-grid--chips .fx-cell--a::before { content: 'Before'; }
  .fx-row.is-mod .fx-cell--b::before, .fx-grid--chips .fx-cell--b::before { content: 'After'; }
  .fx-grid--chips .fx-cell + .fx-cell { margin-top: 6px; }
  .fx-actions--end { margin: 16px -18px -22px; padding: 14px 18px 18px; border-radius: 0; }
  .fx-actions--end .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-dlg[open] { animation: none; }
}

/* The button on the CV page (app-cv.js), under the report's fixes. */
.cvp-fixme { display: grid; justify-items: start; gap: 8px; margin-top: 16px; padding: 16px 18px; background: #FFF0C2; border-radius: 20px; }
.cvp-fixme .btn { white-space: normal; }
.cvp-fixme .ap-hint { margin: 0; }