/* CV Mojo app: the resignation letter builder (/resignation-letter, assets/site/app-resign.js), 2026-10-26.
   A step-by-step wizard in a card on the left, the real page of the letter on the right (sticky, sized to the
   window by app-resign.js through --rl-pw). Under 1000px the page opens from a Preview button as a bottom sheet,
   and the last step shows it inline. Colours and type come from app-v3.css (navy, sunshine, cream, paper,
   Mouse Memoirs, Nunito), with the v2 app tokens as fallbacks. */
/* The app's <main class="ambient-wrap"> hides overflow, which stops anything inside it sticking to the window.
   On this page it clips instead (same look, no scroll box), so the letter and the step buttons can stay in view. */
body:has(#rlRoot) .ambient-wrap { overflow: clip; }
.rl *, .rl *::before, .rl *::after { box-sizing: border-box; }
.rl [hidden] { display: none !important; }
#app .rl .ap-title { font-size: clamp(42px, 3.8vw, 58px) !important; }
.rl .ap-sub { margin-top: 8px; font-size: 16px; }
.rl-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rl-head-btn { white-space: nowrap; }

/* Layout */
.rl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; }
.rl-pane { display: none; }
@media (min-width: 1000px) {
  /* "Your letters" and "New letter" sit top right, so the head (and the page beside the steps) never changes height. */
  .rl .ap-head { position: relative; }
  .rl .ap-head > .ap-actions { position: absolute; top: -8px; right: 0; }
  .rl-grid { grid-template-columns: minmax(0, 1fr) var(--rl-pw, 380px); }
  .rl-pane { position: sticky; top: calc(var(--header-h, 68px) + 16px); display: flex; flex-direction: column; gap: 10px; width: var(--rl-pw, 380px); }
}

/* The wizard card */
.rl-wiz { container-type: inline-size; display: grid; gap: 18px; min-width: 0; padding: 24px 28px 22px; }
.rl-progress { display: grid; gap: 12px; padding-bottom: 16px; border-bottom: 2px dashed var(--line, #e3e5f1); }
.rl-stepper { display: flex; margin: 0; padding: 0; list-style: none; }
.rl-dot { position: relative; flex: 1 1 0; min-width: 0; }
.rl-dot::before { content: ''; position: absolute; top: 17px; left: calc(-50% + 22px); right: calc(50% + 22px); height: 3px; background: var(--line, #e3e5f1); border-radius: 3px; }
.rl-dot:first-child::before { display: none; }
.rl-dot.is-done::before, .rl-dot.is-on::before { background: var(--navy, #191d3b); }
.rl-dot button { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 0; font: inherit; color: var(--muted, #5d6180); background: none; border: 0; cursor: pointer; }
.rl-dot button:disabled { cursor: default; }
.rl-dot-n { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; padding-top: 2px; font-family: var(--v-display, inherit); font-size: 21px; line-height: 1; color: var(--navy, #191d3b); background: var(--paper, #fff); border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line, #e3e5f1); transition: transform .18s ease; }
.rl-dot-n svg { width: 17px; height: 17px; }
.rl-dot.is-on .rl-dot-n { color: var(--cream, #fff); background: var(--navy, #191d3b); box-shadow: 0 0 0 4px var(--sun-l, #fbffc9); }
.rl-dot.is-done .rl-dot-n { padding-top: 0; color: var(--navy, #191d3b); background: var(--sun, var(--yellow, #f5ff38)); box-shadow: none; }
.rl-dot.is-done button:hover .rl-dot-n { transform: translateY(-2px) rotate(-6deg); }
.rl-dot-l { max-width: 100%; overflow: hidden; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; text-overflow: ellipsis; }
.rl-dot.is-on .rl-dot-l, .rl-dot.is-done .rl-dot-l { color: var(--navy, #191d3b); }
.rl-dot button:focus-visible { outline: 3px solid var(--navy, #191d3b); outline-offset: 3px; border-radius: 12px; }
.rl-progress-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
.rl-progress-text { margin: 0; font-size: 14.5px; font-weight: 800; color: var(--navy, #191d3b); }
.rl-peek { display: none; }

/* One step */
.rl-step { min-width: 0; }
.rl-kicker { margin: 0; font-family: var(--v-slab, inherit); font-size: 14px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--tang-t, var(--amber, #7a5a00)); }
#app .rl-h { margin: 4px 0 0; font-family: var(--v-display, inherit); font-size: 42px !important; font-weight: 400; line-height: .92; letter-spacing: .01em; text-transform: uppercase; color: var(--navy, #191d3b); -webkit-text-stroke: .02em currentColor; }
.rl-h:focus, .rl-h:focus-visible { outline: none; } /* focus moves here for screen readers; it is not a control */
.rl-lede { margin: 8px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--muted, #5d6180); }
.rl-fields { display: grid; gap: 16px; margin-top: 20px; }
.rl-fields .ap-field + .ap-field { margin-top: 0; }
.rl .ap-field-row label { font-size: 14px; font-weight: 800; color: var(--text, #2b2f4c); }
.rl-in-next { animation: rl-in-next .28s cubic-bezier(.2, .8, .3, 1) both; }
.rl-in-back { animation: rl-in-back .28s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes rl-in-next { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes rl-in-back { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

/* Fields */
.rl-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rl-fs { min-width: 0; margin: 0; padding: 0; border: 0; }
.rl-fs > legend { margin-bottom: 8px; }
.rl-fs .ap-hint { display: block; margin-top: 10px; }
.rl-date { max-width: 240px; }
.rl-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted, #5d6180); }
.rl-note b { color: var(--navy, #191d3b); }
.rl-lastnote { margin-top: 4px; padding: 12px 14px; color: var(--text, #2b2f4c); background: var(--cream, #f2f3f8); border-radius: 14px; }
.rl-ferr { margin: 2px 0 0; font-size: 14px; font-weight: 800; line-height: 1.4; color: #8C1D18; }
.rl .ap-input[aria-invalid="true"], .rl .ap-textarea[aria-invalid="true"] { border-color: #B3261E; box-shadow: 0 0 0 3px rgba(179, 38, 30, .12); }
.rl-nocv { margin: 0; }
.rl-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.rl-pill { position: relative; cursor: pointer; }
.rl-pill input, .rl-tone input { position: absolute; opacity: 0; pointer-events: none; }
.rl-pill span { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px; font-size: 15px; font-weight: 800; color: var(--navy, #191d3b); background: var(--mist, #f2f3f8); border-radius: 999px; }
.rl-pill input:checked + span { color: var(--cream, #fff); background: var(--navy, #191d3b); }
.rl-pill input:focus-visible + span, .rl-tone input:focus-visible + span, .rl-check input:focus-visible + span { outline: 3px solid var(--navy, #191d3b); outline-offset: 2px; }
.rl-custom { display: flex; gap: 8px; margin-top: 10px; }
.rl-num { width: 96px; }
.rl-unit { width: 140px; }
.rl-tones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rl-tone { position: relative; display: block; cursor: pointer; }
.rl-tone span { display: grid; align-content: start; gap: 6px; height: 100%; padding: 16px 16px 18px; font-family: var(--v-display, inherit); font-size: 28px; font-weight: 400; line-height: .95; text-transform: uppercase; color: var(--navy, #191d3b); background: var(--paper, #fff); border-radius: 18px; box-shadow: inset 0 0 0 2px var(--line, #e3e5f1); }
.rl-tone small { font-family: var(--v-body, inherit); font-size: 14px; font-weight: 600; line-height: 1.4; text-transform: none; color: var(--muted, #5d6180); }
.rl-tone input:checked + span { background: var(--sun-l, var(--yellow-soft, #fbffc9)); box-shadow: inset 0 0 0 3px var(--navy, #191d3b); }
.rl-checks { display: grid; gap: 14px; }
.rl-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.rl-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--navy, #191d3b); }
.rl-check span { display: grid; gap: 2px; }
.rl-check b { font-size: 15.5px; font-weight: 800; color: var(--navy, #191d3b); }
.rl-check small { font-size: 13.5px; line-height: 1.45; color: var(--muted, #5d6180); }
.rl-check--inline { align-items: center; }
.rl-check--inline input { margin-top: 0; }
.rl-sub { margin: -4px 0 0 34px; }
.rl-text { min-height: 340px; font-size: 15px; line-height: 1.6; }

/* Your details, as a summary when they come from a CV */
.rl-me { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--cream, #f2f3f8); border-radius: 18px; }
.rl-me-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; color: var(--navy, #191d3b); background: var(--sun, var(--yellow, #f5ff38)); border-radius: 50% 46% 52% 48%; }
.rl-me-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.rl-me-text b { font-size: 17px; font-weight: 900; color: var(--navy, #191d3b); }
.rl-me-text span { overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.45; color: var(--text, #2b2f4c); }
.rl-me-text small { font-size: 13px; font-weight: 700; color: var(--muted, #5d6180); }
.rl-me-edit { flex: none; font-size: 15px; }
.rl-mefields { display: grid; gap: 16px; }

/* Design and signature */
.rl-sig { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--cream, #f2f3f8); border-radius: 18px; }
.rl-sig-none { flex: 1 1 220px; margin: 0; }
.rl-inline { display: none; margin: 0; }
.rl-inline-btn { display: block; width: min(100%, 420px); margin: 0 auto; padding: 0; background: #fff; border: 0; border-radius: 8px; box-shadow: 0 12px 30px rgba(30, 42, 90, .14), 0 0 0 1px rgba(30, 42, 90, .08); cursor: zoom-in; overflow: hidden; }
.rl-inline-img { display: block; width: 100%; height: auto; }
.rl-inline figcaption { margin-top: 8px; text-align: center; }
.rl-tips { padding: 16px 18px; font-size: 14.5px; background: var(--sun-l, var(--yellow-soft, #fbffc9)); border-radius: 18px; }
.rl-tips h3 { margin: 0 0 8px; font-size: 16px; font-weight: 900; color: var(--navy, #191d3b); }
.rl-tips ul { display: grid; gap: 6px; margin: 0 0 10px; padding-left: 18px; color: var(--text, #2b2f4c); }
.rl-tips a { font-weight: 800; color: var(--navy, #191d3b); }

/* Back and Next */
.rl-nav { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -28px -22px; padding: 14px 28px 18px; background: var(--paper, #fff); border-top: 2px dashed var(--line, #e3e5f1); border-radius: 0 0 26px 26px; }
.rl-nav .btn { white-space: nowrap; }
.rl-next { margin-left: auto; }
.rl-final { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-left: auto; }
.rl-err { margin: 0; }

/* The letter beside the steps */
.rl-prev { position: relative; width: 100%; aspect-ratio: 1075 / 1520; overflow: hidden; background: #fff; border-radius: 10px; box-shadow: 0 16px 38px rgba(30, 42, 90, .16), 0 0 0 1px rgba(30, 42, 90, .08); }
.rl-prev-btn { display: block; width: 100%; height: 100%; padding: 0; background: none; border: 0; cursor: zoom-in; }
.rl-sheet { display: block; width: 100%; height: auto; }
.rl-loading { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 13.5px; font-weight: 800; white-space: nowrap; color: var(--navy, #191d3b); background: rgba(255, 253, 248, .96); border-radius: 999px; box-shadow: 0 4px 14px rgba(30, 42, 90, .14); pointer-events: none; }
.rl-spin { width: 14px; height: 14px; border: 2.5px solid var(--line, #e3e5f1); border-top-color: var(--navy, #191d3b); border-radius: 50%; animation: rl-spin .8s linear infinite; }
@keyframes rl-spin { to { transform: rotate(360deg); } }
.rl-prev-err { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; }
.rl-pane-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.rl-pages { font-size: 13.5px; font-weight: 700; color: var(--muted, #5d6180); }
.rl-pages.is-warn { color: var(--gold-t, var(--amber, #7a5a00)); }
.rl-full { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; }

/* The full-size letter and the saved letters (dialogs). The app resets margins, so the centring is set here. */
.rl-dlg { width: min(880px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; color: var(--text, #2b2f4c); background: var(--paper, #fff); border: 0; border-radius: 24px; box-shadow: 0 30px 70px rgba(16, 20, 44, .35); overflow: auto; }
.rl-dlg::backdrop { background: rgba(16, 20, 44, .55); }
.rl-dlg--letters { width: min(560px, calc(100vw - 32px)); }
.rl-dlg-box { display: grid; gap: 14px; padding: 20px 22px 24px; }
.rl-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#app .rl-dlg-head h2 { margin: 0; font-family: var(--v-display, inherit); font-size: 34px !important; font-weight: 400; line-height: .95; text-transform: uppercase; color: var(--navy, #191d3b); }
.rl-dlg-x { display: grid; place-items: center; flex: none; width: 44px; height: 44px; font-size: 28px; line-height: 1; color: var(--navy, #191d3b); background: var(--cream, #f2f3f8); border: 0; border-radius: 50%; cursor: pointer; }
.rl-dlg-x:focus-visible { outline: 3px solid var(--navy, #191d3b); outline-offset: 2px; }
.rl-dlg .rl-pages { margin: 0; }
.rl-dlg-img { display: block; width: 100%; height: auto; background: #fff; border-radius: 6px; box-shadow: 0 0 0 1px rgba(30, 42, 90, .1); }
.rl-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rl-item { display: flex; align-items: center; gap: 4px; min-width: 0; background: var(--cream, #f2f3f8); border: 2px solid transparent; border-radius: 16px; }
.rl-item.is-on { border-color: var(--navy, #191d3b); }
.rl-open { flex: 1; min-width: 0; display: grid; gap: 2px; padding: 12px 14px; text-align: left; font: inherit; color: var(--navy, #191d3b); background: none; border: 0; border-radius: 16px; cursor: pointer; }
.rl-open:hover { background: rgba(255, 255, 255, .5); }
.rl-open b { overflow: hidden; font-size: 15px; font-weight: 900; white-space: nowrap; text-overflow: ellipsis; }
.rl-open span { font-size: 13px; color: var(--muted, #5d6180); }
.rl-del { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: 4px; color: var(--muted, #5d6180); background: none; border: 0; border-radius: 12px; cursor: pointer; }
.rl-del:hover { color: #8C1D18; background: #FDECEC; }
.rl-new2 { justify-self: start; }

/* A narrow wizard (beside the letter on a small laptop, or a phone) */
/* The last step's buttons (Back, Save, Word, PDF) and the tips after them. The buttons stay pinned while they fit
   on one line; in a narrow card they wrap, so they sit in the flow instead of covering the design and signature. */
.rl-nav.rl-nav--final { margin-bottom: 0; border-radius: 0; }
.rl-wiz > .rl-tips { margin-top: 4px; }
@container (max-width: 640px) {
  .rl-nav.rl-nav--final { position: static; padding-top: 16px; }
}
@container (max-width: 560px) {
  .rl-two, .rl-tones { grid-template-columns: minmax(0, 1fr); }
  .rl-dot-l { display: none; }
  .rl-tone span { font-size: 26px; }
  .rl-sub { margin-left: 0; }
}

/* Tablet and phone: the letter opens from the Preview button, and shows inline on the last step */
@media (max-width: 999px) {
  .rl-peek { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; font: inherit; font-size: 14px; font-weight: 800; color: var(--navy, #191d3b); background: var(--cream, #f2f3f8); border: 0; border-radius: 12px; cursor: pointer; }
  .rl-peek img { display: block; width: 30px; height: 42px; object-fit: cover; object-position: top; background: #fff; border-radius: 4px; box-shadow: 0 0 0 1px rgba(30, 42, 90, .14); }
  .rl-peek:focus-visible { outline: 3px solid var(--navy, #191d3b); outline-offset: 2px; }
  .rl-inline { display: block; }
  .rl-dlg:not(.rl-dlg--letters) { width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 24px 24px 0 0; }
}
/* The app's round "+" button sits bottom right on phones (index.php, up to 768px): keep the step buttons clear of it. */
@media (max-width: 768px) {
  .rl-nav { padding-right: 76px !important; }
}
@media (max-width: 640px) {
  .rl-wiz { padding: 18px 16px 18px; }
  .rl-nav { margin: 0 -16px -18px; padding: 12px 16px 14px; }
  #app .rl-h { font-size: 36px !important; }
  .rl-date { max-width: none; }
  .rl-text { min-height: 300px; }
  .rl-nav .btn { flex: 1 1 auto; justify-content: center; }
  .rl-final { width: 100%; }
  .rl-final .btn { flex: 1 1 calc(50% - 5px); }
  .rl-final .rl-btn--pdf { order: -1; flex-basis: 100%; }
  .rl-me { flex-wrap: wrap; align-items: flex-start; }
  .rl-me-text { flex: 1 1 calc(100% - 60px); }
  .rl-me-edit { margin-left: 58px; }
  .rl-nav.rl-nav--final > .rl-back { order: 2; }
  .rl-dlg-box { padding: 16px 14px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .rl-in-next, .rl-in-back, .rl-spin { animation: none; }
  .rl-dot-n { transition: none; }
}