/* CV Mojo app - "calmer look" preview (2026-10-28). Owner: "let's do what you said, but don't lose current version, I want
   to compare". Loaded after app-v3.css only when this browser chose it (?look=calm; ?look=current switches back), and
   every rule is scoped under html.v3-calm, so the current design is untouched for everyone else.
   The colours, page titles, illustrations and personality stay. What changes is the everyday working parts:
     1. Buttons: the brush-stroke, hand-lettered capitals only on a page's main action (the first button in a page
        header, Continue editing, Apply now, Search and the big "Get my..." tool buttons). Every other button is a plain
        rounded button in the body font, in sentence case.
     2. The slab face only on the small kickers above titles (Good evening, Your CV). Sidebar section labels and card
        labels use the body font.
     3. Dashboard: the CV comes first; rep, streak and badges move to a small line at the bottom (app-calm.js).
     4. The free uses card in the sidebar: a quiet card instead of the tilted orange sticker.
     5. Stickers on working cards (Primary, Live roles, +10 rep): flat pills, not tilted. */

/* ── 1. Buttons ─────────────────────────────────────────────────────── */
html.v3-calm .btn:is(.btn-primary, .btn-outline, .btn-yellow, .btn-accent, .btn-danger, .btn-ghost-dark):not([style*="background"]):not(:is(.ap-head .ap-actions > .btn-primary:first-child, .db-actions .btn-primary, .jd-apply, .ap-btn-block.btn-primary, .jb-go)) {
  min-height: 44px; padding: 10px 18px !important; font-family: var(--v-body) !important; font-size: 15px !important; font-weight: 800 !important;
  line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; -webkit-text-stroke: 0 !important; border-radius: 12px;
}
html.v3-calm .btn:is(.btn-primary, .btn-outline, .btn-yellow, .btn-accent, .btn-danger, .btn-ghost-dark):not([style*="background"]):not(:is(.ap-head .ap-actions > .btn-primary:first-child, .db-actions .btn-primary, .jd-apply, .ap-btn-block.btn-primary, .jb-go))::before {
  -webkit-mask: none !important; mask: none !important; -webkit-mask-image: none !important; mask-image: none !important; border-radius: 12px;
}
html.v3-calm .btn:is(.btn-primary, .btn-outline, .btn-yellow, .btn-accent, .btn-danger, .btn-ghost-dark):not([style*="background"]):not(:is(.ap-head .ap-actions > .btn-primary:first-child, .db-actions .btn-primary, .jd-apply, .ap-btn-block.btn-primary, .jb-go)):hover {
  transform: translateY(-1px) !important;
}
/* Small buttons stay small */
html.v3-calm .btn:is(.btn-sm, .ad-btn-sm, .jd-ask-btn, .tl-read):is(.btn-primary, .btn-outline, .btn-yellow, .btn-accent, .btn-danger, .btn-ghost-dark):not([style*="background"]):not(:is(.ap-head .ap-actions > .btn-primary:first-child, .db-actions .btn-primary, .jd-apply, .ap-btn-block.btn-primary, .jb-go)) {
  min-height: 36px; padding: 7px 13px !important; font-size: 13.5px !important;
}
html.v3-calm .btn:focus-visible { border-radius: 12px; }

/* ── 2. One slab face, on kickers only ──────────────────────────────── */
html.v3-calm { --v-slab: var(--v-body); }
html.v3-calm :is(.ap-kicker, .db-hello, .db-kicker) { font-family: 'Alfa Slab One', Rockwell, 'Roboto Slab', Georgia, serif; }
html.v3-calm :is(.side-label, .db-label, .db-tools-label, .tt-group-h, .nc-also-h, .sal-kicker, .br-opt-top b, .sgp-uses-h, .mc-group-h, .mc-way-h span,
  .v3-um .v3-um-label, .jrp-kicker, .dpk-kicker, .fx-kicker, .cvn-label, .cvn-list-h, .jk.is-v3 .jk-label, .rl-kicker, .pf2-url-l, .pf2-peek-l, .pf2-str-h, .adj-day h4, .jd-employer) {
  font-weight: 800; letter-spacing: .02em;
}
/* Sidebar section labels: small, quiet capitals in the body face */
html.v3-calm .side-label { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: #9FB0D8; }
html.v3-calm .side-more summary.side-label { color: #9FB0D8; }
/* Card labels: sentence case, a little smaller */
html.v3-calm :is(.db-label, .db-tools-label, .mc-group-h, .jrp-kicker, .dpk-kicker) { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
html.v3-calm .tt-group-h { font-size: 15px; letter-spacing: 0; color: var(--navy); }

/* ── 3. Dashboard: the CV first, activity at the bottom (app-calm.js moves #dbPills) ── */
html.v3-calm .db-head { align-items: flex-end; }
html.v3-calm .calm-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; padding: 14px 18px; background: var(--paper); border-radius: 18px; box-shadow: var(--shadow-sm); }
html.v3-calm .calm-act[hidden] { display: none; }
html.v3-calm .calm-act-h { margin: 0; font-family: var(--v-body); font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
html.v3-calm .calm-act .db-pills { gap: 6px; }
html.v3-calm .calm-act .db-pill { padding: 3px 10px; font-size: 12.5px; }

/* ── 4. Free uses: a quiet card in the sidebar ──────────────────────── */
html.v3-calm .side-uses { padding: 14px 16px 15px; color: #DCE3F4; background: rgba(255, 246, 224, .07); border-radius: 18px; box-shadow: inset 0 0 0 1.5px rgba(255, 246, 224, .14); transform: none; }
html.v3-calm .side-uses:hover, html.v3-calm .side-uses:focus-within { transform: none; }
html.v3-calm .side-uses::before { display: none; }
html.v3-calm .side-uses-top b { font-family: var(--v-body); font-size: 15.5px; font-weight: 900; line-height: 1.25; letter-spacing: 0; text-transform: none; color: var(--cream); -webkit-text-stroke: 0; }
html.v3-calm .side-uses-dots i { background: var(--mint); }
html.v3-calm .side-uses-dots i.is-used { background: rgba(255, 246, 224, .2); }
html.v3-calm .side-uses-dots i.is-held { background: transparent; box-shadow: inset 0 0 0 2px var(--mint); }
html.v3-calm :is(.side-uses-info, .side-uses-held) { color: #DCE3F4; }
html.v3-calm :is(.side-uses-what, .side-uses-up, .side-uses-act) { color: var(--mint); text-decoration-color: rgba(205, 237, 228, .5); }
html.v3-calm :is(.side-uses-what, .side-uses-up, .side-uses-act):hover { color: var(--cream); text-decoration-color: var(--cream); }
html.v3-calm .side-uses :focus-visible { outline-color: var(--sun); }

/* ── 5. Stickers on working cards: flat pills ───────────────────────── */
html.v3-calm .cvm-sticker { padding: 4px 11px !important; font-family: var(--v-body) !important; font-size: 12px !important; font-weight: 800; line-height: 1.3; letter-spacing: .02em; text-transform: none; -webkit-text-stroke: 0; border-radius: 999px; box-shadow: none !important; transform: none !important; animation: none !important; }

/* ── The preview switch (app-calm.js) ───────────────────────────────── */
.calm-switch { position: fixed; z-index: 400; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 14px; font-family: var(--v-body, system-ui, sans-serif); font-size: 13px; font-weight: 700; color: #FFFAEC; white-space: nowrap; background: #1E2A5A; border-radius: 999px; box-shadow: 0 10px 26px rgba(30, 42, 90, .28); transform: translateX(-50%); }
.calm-switch a { padding: 5px 11px; font-weight: 800; color: #1E2A5A; text-decoration: none; background: #FFC93C; border-radius: 999px; }
.calm-switch a:focus-visible { outline: 3px solid #FFFAEC; outline-offset: 2px; }
.calm-switch button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; font: inherit; font-size: 16px; line-height: 1; color: #FFFAEC; background: none; border: 0; border-radius: 50%; cursor: pointer; }
.calm-switch button:hover { background: rgba(255, 250, 236, .12); }
@media print { .calm-switch { display: none; } }
@media (max-width: 520px) { .calm-switch { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }