/* Cover letters sheet — DRAFT 4 (round 163; drafts 1–3 in draft-1/ … draft-3/): what the product's own CSS
   (assets/product.css, the shell's) does not already draw. A3c is the CVs page's shelf (`.cv-shelf*`, `.cv-mini`, `.cv-shelf-note`, `.cv-shelf-why`, THE LIFT
   HOVER) — only the letter inside the miniature is new. D is a new card in the product's language: white on the ground,
   no line, the lift hover (`.cl-lift`: the growth, `shadow.lift`, 800ms ease-out-expo; the press with the growth off;
   the clicked card chosen at once). Draft 1's B and C are in draft-1/cl.css. */
:root {
  --cl-ink: #0F131A; --cl-strong: #0F131AC9; --cl-muted: #0F131A9E; --cl-line: #0F131A26; --cl-accent: #2563EB;
  --cl-shadow: 0 14px 32px 0 rgba(0, 0, 0, 0.05), 0 6px 8px 0 rgba(0, 0, 0, 0.04);
  --cl-expo: cubic-bezier(0.19, 1, 0.22, 1); --cl-std: cubic-bezier(0.4, 0, 0.2, 1);
  --cl-pm-line: #0F131A33; --cl-pm-ink: #0F131A70;
}

/* ── A3: the letter on the page — drawn at 600 × 849 like the CV and scaled with the page (`.cv-mini`) ────────── */
.cl-mini-date { margin-top: 36px; font-size: 15px; line-height: 22px; color: var(--cl-muted); }
.cl-mini-p { margin-top: 16px; font-size: 16px; line-height: 26px; color: var(--cl-strong); }
.cl-mini-p.is-first { margin-top: 28px; color: var(--cl-ink); }
.cl-mini-p.is-sign { margin-top: 18px; color: var(--cl-ink); }
.cl-mini-p.is-sign + .cl-mini-p.is-sign { margin-top: 4px; font-weight: 600; }
/* the letter's head is the company's — its mark, its name, the role — where a letterhead sits */
.cl-mini-to { display: flex; align-items: center; gap: 20px; }
.cl-mini-to-co { font-family: Sora, sans-serif; font-size: 28px; line-height: 36px; font-weight: 600; }
.cl-mini-to-re { margin-top: 2px; font-size: 16px; line-height: 24px; color: var(--cl-strong); }
/* the company's mark is a box of its own size wherever it stands (inline, outside a flex row, it had none) */
.cl-mark { display: block; flex: none; }
/* A3c: the caption as D's address — the company in capitals over the title, the date under it (owner, round 161) */
.cl-cap-co { margin-bottom: 4px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cl-muted); overflow-wrap: break-word; }
@media (min-width: 768px) { .cl-cap-co { font-size: 13px; line-height: 18px; } }

/* ── the lift (the product's THE LIFT HOVER, on these cards) ─────────────────────────────────────────────────── */
.cl-lift {
  --lift: 1.015; --tap-scale: 0.9875; --tap-drop: 0.5px;
  position: relative;
  transition-property: scale, transform, box-shadow, background-color;
  transition-duration: 800ms, 150ms, 800ms, 300ms;
  transition-timing-function: var(--cl-expo), var(--cl-std), var(--cl-expo), var(--cl-std);
}
.cl-lift:has(> .cl-hit:active) { transform: scale(var(--tap-scale)) translateY(var(--tap-drop)); }
@media (hover: hover) {
  .cl-lift:hover { z-index: 1; scale: var(--lift); box-shadow: var(--cl-shadow); }
  .cl-lift:hover:has(> .cl-hit:active) { scale: 1; transition-duration: 150ms, 150ms, 800ms, 300ms; transition-timing-function: var(--cl-std), var(--cl-std), var(--cl-expo), var(--cl-std); }
  .cl-lift[data-chosen-now], .cl-lift[data-chosen-now]:hover { scale: 1; box-shadow: none; transition-duration: 150ms; transition-timing-function: var(--cl-std); }
  .cl-lift:hover .cl-why { text-decoration-color: currentColor; transition-duration: 220ms; }
  /* "New letter" as the CVs page's Add CV: the ink at 2.5% as its fill, and the lift's shadow too (owner, round 164 —
     no shadow until then, as Add CV had none) */
  .cl-env-new.cl-lift:hover { background-color: #0F131A06; transition-duration: 800ms, 150ms, 800ms, 220ms; }
}
.cl-hit { position: absolute; inset: 0; border-radius: inherit; outline: none; }
.cl-hit:focus-visible { box-shadow: 0 0 0 2px var(--cl-accent); }

/* the state lines */
.cl-state { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--cl-muted); }
.cl-state.is-failed { color: var(--cl-strong); }
/* a letter that failed: a red dot where a letter being written has its amber one — the same size and place, still
   (owner, round 162; the dot red of the product's tracker, badge.rejected-dot) */
.cl-dot-failed { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 9999px; background: #ED4E45; vertical-align: 1px; }
.cl-dots { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 9999px; background: #F2A33A; vertical-align: 1px; animation: cl-pulse 1.2s ease-in-out infinite; }
@keyframes cl-pulse { 50% { opacity: 0.3; } }
.cl-why { display: inline-flex; align-items: center; font-weight: 500; color: var(--cl-accent); text-decoration-line: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 300ms var(--cl-std); white-space: nowrap; }
.cl-why > svg { width: 16px; height: 16px; position: relative; top: 0.5px; }
.cl-why > svg path { stroke-width: 1.97; }
.cl-kebab { position: absolute; z-index: 1; right: 16px; bottom: 16px; width: 40px; height: 40px; }
.cl-kebab > svg { width: 20px; height: 20px; }

/* ── D: envelopes — the logo is the stamp, the date the postmark ──────────────────────────────────────────────── */
.cl-envs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 768px) { .cl-envs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1280px) { .cl-envs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* D1, D3: a fourth from 1668; D2, D4 (`is-three`) stay at three (owner, round 161) */
@media (min-width: 1668px) { .cl-envs:not(.is-three) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cl-env { display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 1.62; padding: 24px 76px 24px 28px; border-radius: 28px; background: #fff; }
/* the flap's lines inside the envelope's own rounded edge (they ran out past the corners in draft 1) */
.cl-env-flapbox { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.cl-env-flap { position: absolute; inset: 0; width: 100%; height: 100%; }
.cl-env-flap path { stroke: #0F131A1F; stroke-width: 1.5; }
.cl-env-flapbox.is-dashed .cl-env-flap path { stroke: #0F131A2E; stroke-dasharray: 6 6; }
.cl-env-stamp { position: absolute; top: 18px; right: 18px; display: flex; align-items: center; justify-content: center; width: 58px; height: 68px; padding: 5px; background: #fff; border: 2px dashed #0F131A33; border-radius: 6px; pointer-events: none; }
.cl-env-stamp > img { width: 100%; height: 100%; object-fit: contain; border-radius: 3px; background: #0F131A; }
.cl-env-stamp > b { display: none; font-family: Sora, sans-serif; font-size: 26px; font-weight: 600; color: #0F131A73; }
.cl-env-stamp.is-initial > b, .cl-env-stamp:not(:has(img)) > b { display: block; }
/* the address: the text does not take the pointer, so a press anywhere on the envelope is the envelope's */
.cl-env-to { position: relative; pointer-events: none; }
.cl-env-co { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cl-muted); }
.cl-env-title { margin-top: 4px; font-family: Sora, sans-serif; font-size: 18px; line-height: 24px; font-weight: 600; overflow-wrap: break-word; }
.cl-env-date { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--cl-muted); }
@media (max-width: 639.98px) { .cl-env { padding: 20px 64px 20px 20px; border-radius: 24px; } }

/* the postmark: the shape (svg) and the date over it, tilted; the month always short */
.cl-pm { position: absolute; display: block; pointer-events: none; translate: 0 -50%; rotate: var(--rot, -14deg); }
.cl-pm > svg { position: absolute; inset: 0; overflow: visible; }
.cl-pm > svg * { fill: none; stroke: var(--cl-pm-line); }
.cl-pm-t { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--cl-pm-ink); font-weight: 700; text-align: center; }
.cl-pm-t > b { font-size: 16px; line-height: 16px; }
.cl-pm-t > i { margin-top: 2px; font-style: normal; font-size: 10px; line-height: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.cl-pm-t.is-line { flex-direction: row; gap: 5px; }
.cl-pm-t.is-line > b { font-size: 15px; line-height: 16px; }
.cl-pm-t.is-line > i { margin-top: 0; font-size: 12px; line-height: 16px; }
.cl-pm-S4, .cl-pm-S5, .cl-pm-S6 { --rot: -10deg; }
.cl-pm-S7 { --rot: -6deg; }
.cl-pm.has-tail { --rot: -5deg; }
/* D1 … D4: left of the stamp, 12 clear of it, its centre a little under the stamp's */
.cl-pm-by-stamp { top: 56px; right: 88px; }
/* D5: the stamp over the company's name, in the address's flow */
.cl-env.is-left .cl-env-stamp { position: relative; top: auto; right: auto; }
.cl-env-row { position: relative; display: flex; align-items: center; height: 68px; margin-bottom: 14px; }
.cl-pm-corner { top: 52px; right: 22px; }                     /* P1: the top right corner, where the stamp was */
.cl-pm-over { top: calc(50% + 6px); left: 42px; }              /* P2: over the stamp's right edge, as a post office cancels */
.cl-pm-beside { top: 50%; left: 72px; }                        /* P3: beside the stamp, 14 clear of it */
.cl-pm-seal { top: var(--apex, 33%); left: 50%; translate: -50% -50%; }  /* P4: a seal on the flap's point */
/* the postmark is ink on the envelope's paper: the flap's line goes under it, not through the date */
.cl-pm > svg > :first-child { fill: #fff; }
@media (max-width: 639.98px) {
  .cl-pm-by-stamp { right: 84px; }
  .cl-pm-corner { right: 18px; }
}

/* D3, D4: "New letter" as the first cell, the envelope's shape in the CVs page's Add CV dashes, the black circle */
.cl-env-new { background: transparent; }
.cl-env-dash { position: absolute; inset: 0; width: 100%; height: 100%; color: #0F131A40; pointer-events: none; }
.cl-env-plus { position: absolute; left: 50%; top: 42%; translate: -50% -50%; pointer-events: none; }
@media (max-width: 639.98px) { .cl-env-dash rect { rx: 24px; } }
/* New letter's glow under the pointer (G1 — owner, round 163; draft 3's G0–G6 in draft-3/): a radial gradient centred
   on the black circle, white at 55% out to the circle's edge (48% of the glow's radius) and gone at its own edge, Ø150
   round the 72 circle (Ø125 round the 60 one under 768 — the desktop's numbers scaled with the circle). In a box of the
   envelope's own rounded edge, UNDER the dashes — the outline's and the flap's (owner, round 163: draft 3 drew it over
   the flap's) — and under the circle; in with the growth (800ms ease-out-expo), out on 300. */
.cl-env-glowbox { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.cl-env-glow { position: absolute; left: 50%; top: 42%; width: 150px; height: 150px; translate: -50% -50%; border-radius: 9999px; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, rgb(255 255 255 / 0.55) 0%, rgb(255 255 255 / 0.55) 48%, rgb(255 255 255 / 0.3) 66%, rgb(255 255 255 / 0.1) 84%, rgb(255 255 255 / 0) 100%); transition: opacity 300ms var(--cl-std); }
@media (max-width: 767.98px) { .cl-env-glow { width: 125px; height: 125px; } }
@media (hover: hover) {
  .cl-env-new.cl-lift:hover .cl-env-glow { opacity: 1; transition: opacity 800ms var(--cl-expo); }
}
/* A3c's New letter is the CVs page's Add CV — and takes its glow: the product's `.cv-shelf-glow` (tailwind.css, round
   163), here until the shell's CSS is captured again */
.cv-shelf-glow { position: absolute; left: 50%; top: 50%; width: 125px; height: 125px; translate: -50% -50%; border-radius: 9999px; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, rgb(255 255 255 / 0.55) 0%, rgb(255 255 255 / 0.55) 48%, rgb(255 255 255 / 0.3) 66%, rgb(255 255 255 / 0.1) 84%, rgb(255 255 255 / 0) 100%); transition: opacity 300ms var(--cl-std); }
.cv-shelf-add > .cv-shelf-plus { position: relative; }
@media (min-width: 768px) { .cv-shelf-glow { width: 150px; height: 150px; } }
@media (hover: hover) {
  .cv-shelf-lift:hover > .cv-shelf-page > .cv-shelf-add > .cv-shelf-glow { opacity: 1; transition: opacity 800ms var(--cl-expo); }
}
/* the sheet's specimens: the hover held on (`force=hover`) */
.cl-env-new.is-hover { z-index: 1; scale: var(--lift); background-color: #0F131A06; box-shadow: var(--cl-shadow); }
.cl-env-new.is-hover .cl-env-glow { opacity: 1; }
.cv-shelf-lift.is-hover { z-index: 1; scale: var(--lift); }
.cv-shelf-lift.is-hover > .cv-shelf-page > .cv-shelf-add { background-color: #0F131A06; box-shadow: var(--cl-shadow); }
.cv-shelf-lift.is-hover .cv-shelf-glow { opacity: 1; }

/* ── the sheet's specimens: one card on the page's ground (page.html?…&solo=<letter>) ──────────────────────────── */
html.cl-solo body { padding: 0 !important; min-height: 0 !important; }
.cl-solo-main { display: block; padding: 24px; }
/* one card as wide as on a 1440 window in three columns (404), in a DESKTOP window: the sheet frames a 800-wide page and
   shows its first 452 — a 452 window would have drawn the phone's envelope (its padding, corner and the 60 circle) */
html.cl-solo:not(.cl-strip) .cl-solo-main { width: 452px; box-sizing: border-box; }
.cl-envs.is-solo { grid-template-columns: minmax(0, 1fr) !important; gap: 0; }
/* the tone tabs' strip: six pages in a row, their tabs and the top of each (`strip=1`) */
.cv-shelf.is-strip { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 0 20px; }
/* A3c's New letter alone, as wide as on a 1440 window (297: four a row) */
.cv-shelf.is-solo { grid-template-columns: minmax(0, 1fr) !important; gap: 0; }
html.cl-solo.cl-A:not(.cl-strip) .cl-solo-main { width: calc(var(--tile, 297px) + 48px); }

/* The product's icon helper gives every glyph its size; the sheet's bare <svg>s get theirs here — WebKit draws a glyph
   with no size as nothing (the ⋮ on the pages were empty rings in Safari). */
.cv-shelf-kebab > svg { width: 20px; height: 20px; }
.sort-menu-icon > svg { width: 20px; height: 20px; }
button[data-cl-new] > svg { width: 16px; height: 16px; }
button.bar-add > svg { width: 20px; height: 20px; }

/* ── Round 165: the letter's foot dissolves (A3c, `fd=H1…H3`) ───────────────────────────────────────────────────
   The Settings card's dissolve (tailwind.css, `.settings-panel::after`: white, the pinned headers' eleven-stop curve over
   the whole box, 56 on a card ~1100 tall) — here at the PAGE's size: over the page's foot, under ⋮ (its 40 stands 8 from
   the foot), white on the page's white, so it shows only where the letter's text runs down to the foot. Heights for the
   1440 page (297 × 420) — H1 56 (⋮'s 48 and 8 over it), H2 88, H3 128 (30% of the page) — in the page's own width
   (`cqw`: the page is the container), so a phone's 171 page takes 32 / 51 / 74, as the miniature itself scales. */
html.cl-fd-H1 .cv-shelf-page > a.cv-shelf-doc:not(.cv-shelf-add)::after,
html.cl-fd-H2 .cv-shelf-page > a.cv-shelf-doc:not(.cv-shelf-add)::after,
html.cl-fd-H3 .cv-shelf-page > a.cv-shelf-doc:not(.cv-shelf-add)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background-image: linear-gradient(
    to top,
    #fff 0,
    rgb(255 255 255 / 0.98) 25%,
    rgb(255 255 255 / 0.95) 35%,
    rgb(255 255 255 / 0.89) 45%,
    rgb(255 255 255 / 0.78) 55%,
    rgb(255 255 255 / 0.62) 65%,
    rgb(255 255 255 / 0.45) 73%,
    rgb(255 255 255 / 0.27) 81%,
    rgb(255 255 255 / 0.14) 89%,
    rgb(255 255 255 / 0.05) 95%,
    rgb(255 255 255 / 0) 100%
  );
}
html.cl-fd-H1 .cv-shelf-page > a.cv-shelf-doc:not(.cv-shelf-add)::after { height: 18.98cqw; }  /* 56 at the 1440 page (its inside 295 — the hairline 1 a side) */
html.cl-fd-H2 .cv-shelf-page > a.cv-shelf-doc:not(.cv-shelf-add)::after { height: 29.83cqw; }  /* 88 */
html.cl-fd-H3 .cv-shelf-page > a.cv-shelf-doc:not(.cv-shelf-add)::after { height: 43.39cqw; }  /* 128 */
/* ⋮ stays over the dissolve */
.cv-shelf-kebab { z-index: 1; }

/* ── Round 165: the "Copied" toast with its check (`ck=K0…K8`) ───────────────────────────────────────────────────
   K0 — as it is: the apply flow's toast (ui/apply-confirm-modal: the ink, 44 high, 20 a side, 14 / 600, shadow md).
   K1 — the check alone, white; K2 — the check alone, the answered question's green (`badge.liked-dot` #10A44E).
   K3–K7 — the check on a round plate 28 (the Saved toast's), 8 from the toast's end — concentric with its 44 — and 8 to
   the text: K3 white plate, ink check; K4 green plate, white check (the Saved toast's own); K5 green plate, ink check;
   K6 white plate, green check; K7 the light green plate (`badge.tab-high` #B0E8C8), ink check.
   K8 — Personalization's Saved toast exactly (tailwind.css `.saved-toast`, round 134): 40 high, 16 regular, the green
   plate 28 with a white check 18, 6 from the end, 17 on the right. */
.cl-toast { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 70; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 9999px; background: #0F131A; color: #fff; font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.cl-toast[hidden] { display: none; }
.cl-toast-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; }
.cl-toast-ic > svg { width: 18px; height: 18px; }
.cl-toast-K1, .cl-toast-K2 { padding-left: 16px; gap: 6px; }
.cl-toast-K2 .cl-toast-ic { color: #10A44E; }
.cl-toast.has-plate { padding-left: 8px; }
.cl-toast.has-plate .cl-toast-ic { width: 28px; height: 28px; border-radius: 9999px; }
.cl-toast-K3 .cl-toast-ic { background: #fff; color: #0F131A; }
.cl-toast-K4 .cl-toast-ic { background: #10A44E; color: #fff; }
.cl-toast-K5 .cl-toast-ic { background: #10A44E; color: #0F131A; }
.cl-toast-K6 .cl-toast-ic { background: #fff; color: #10A44E; }
.cl-toast-K7 .cl-toast-ic { background: #B0E8C8; color: #0F131A; }
.cl-toast-K8 { height: 40px; padding: 0 17px 0 6px; font-size: 16px; line-height: 24px; font-weight: 400; }
.cl-toast-K8 .cl-toast-ic { background: #10A44E; color: #fff; }