/* CV Mojo v3 - the signed-in app in the v3 look (preview only: index.php loads this after all v2 app CSS
   when the cvm_v3=1 cookie is set). It remaps the app's design tokens to the v3 palette and fonts, then
   restyles the shared pieces every module uses (sidebar, page heads, buttons, cards, tabs, chips, fields,
   stat tiles, rings, empty states, dialogs) and adds per-module touch-ups.
   Rules: navy is the anchor; sunshine / tangerine / teal-mint / sky are accents; no yellow text on navy;
   no pink or purple; forms, tables, long text and the CV document stay calm. A user's CV design
   (templates, cvx document, previews) is never recoloured beyond its frame. */

/* 1. v3 tokens and shapes =================================================== */
:root {
  --cream: #FFF6E0; --paper-v3: #FFFDF8;
  --sun: #FFC93C; --sun-l: #FFE59A; --sun-d: #E9A01A; --gold-t: #8A5A00;
  --tang: #FF8A3D; --tang-t: #B34A00;
  --teal: #1F9E89; --teal-t: #13705F; --mint: #CDEDE4;
  --sky: #CFE8F6; --sky-l: #F6EAD0; --on-navy: #D9E1F2;
  --v-display: 'Mouse Memoirs', 'Arial Narrow', Impact, sans-serif;
  --v-slab: 'Alfa Slab One', Rockwell, 'Roboto Slab', Georgia, serif;
  --v-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --v-blob-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cpath d='M96 8C128 4 156 16 176 38C196 60 198 92 190 120C182 148 168 172 140 186C112 200 76 198 50 184C24 170 8 144 6 112C4 80 14 50 36 30C54 14 72 10 96 8Z'/%3E%3C/svg%3E");
  --v-blob-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cpath d='M40 34C66 8 116 2 152 16C182 28 198 56 196 90C194 118 196 146 178 170C158 194 120 200 86 194C54 188 24 172 12 142C0 112 4 78 14 58C20 48 30 42 40 34Z'/%3E%3C/svg%3E");
  --v-blob-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cpath d='M62 14C94 0 140 4 168 28C192 48 198 82 194 114C190 148 172 178 138 192C104 204 64 196 38 174C14 154 4 122 8 92C12 60 30 28 62 14Z'/%3E%3C/svg%3E");
  --v-blob-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cpath d='M74 10C108 2 146 12 172 36C194 58 196 92 186 120C178 144 176 168 154 184C130 200 92 200 64 188C36 176 14 154 8 124C2 94 12 66 28 44C40 28 54 14 74 10Z'/%3E%3C/svg%3E");
  --v-blob-e: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cpath d='M100 4C150 4 196 42 196 98C196 154 156 196 100 196C46 196 4 156 4 102C4 46 48 4 100 4Z'/%3E%3C/svg%3E");
  --v-oval: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none'%3E%3Cpath d='M146 6C214 4 290 34 294 98C298 158 232 196 150 194C70 192 6 160 6 102C6 44 76 8 146 6Z'/%3E%3C/svg%3E");
  --v-label: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90' preserveAspectRatio='none'%3E%3Cpath d='M18 8C70 3 170 1 222 7C234 9 237 24 237 44C237 64 235 80 221 83C160 89 80 88 22 85C8 84 3 70 3 48C3 26 5 10 18 8Z'/%3E%3C/svg%3E");
  --v-swatch-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 64' preserveAspectRatio='none'%3E%3Cpath d='M24 8C92 4 170 3 224 7C236 9 239 22 238 34C237 47 232 56 219 57C150 60 74 60 14 59C6 59 6 54 9 49C12 42 14 36 15 30C16 20 16 11 24 8Z'/%3E%3C/svg%3E");
  --v-swatch-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 64' preserveAspectRatio='none'%3E%3Cpath d='M10 7C82 4 160 3 228 5C234 6 234 10 232 15C229 23 228 30 228 38C228 49 225 55 217 57C150 60 82 60 20 58C9 57 4 48 4 35C4 21 3 9 10 7Z'/%3E%3C/svg%3E");
  --v-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' preserveAspectRatio='none'%3E%3Cpath d='M8 19C70 11 170 8 290 7C296 7 297 12 293 16C290 20 291 24 294 27C296 30 292 31 286 31C190 27 92 28 12 30C4 30 2 22 8 19Z'/%3E%3C/svg%3E");
  --v-frame-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cpath d='M18 10C70 4 140 0 180 6C196 9 199 26 198 60C197 110 199 160 192 182C186 198 150 196 100 195C56 194 22 198 10 184C0 172 3 120 3 80C3 40 2 16 18 10Z'/%3E%3C/svg%3E");
  --v-frame-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cpath d='M30 4C80 0 150 6 182 12C198 16 200 40 198 90C196 140 200 172 188 188C176 200 130 196 90 196C50 196 20 200 8 184C0 172 2 120 2 70C2 30 6 8 30 4Z'/%3E%3C/svg%3E");
}

/* 2. App tokens, remapped ================================================== */
/* The SPA (index.php), app.css and the app-*.css parts all read these. Values move to the v3 palette:
   navy anchor, warm cream page, paper cards, sunshine / tangerine / teal-mint / sky accents. */
:root {
  --c-primary: #1E2A5A; --c-primary-light: #F3E3BF; --c-primary-dark: #16204A;
  --c-accent: #B34A00; --c-accent-light: #FFE9DA;
  --c-success: #13705F; --c-success-light: #CDEDE4;
  --c-dark: #1E2A5A; --c-text: #1D1A26; --c-text-light: #5D5869;
  --c-border: #EDE4CB; --c-bg: #FFF6E0; --c-card: #FFFDF8;
  --green-sidebar: #1E2A5A; --green-active: #16204A; --green-accent: #1E2A5A; --green-dot: #CDEDE4;
  --chip-bg: #F6EDD6; --stat-c-green: #1E2A5A;
  --focus-ring: 0 0 0 4px rgba(30, 42, 90, .16);
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --radius: 22px; --radius-sm: 14px; --radius-lg: 26px;
  --shadow-sm: 0 6px 18px rgba(30, 42, 90, .07), 0 0 0 1px rgba(30, 42, 90, .06);
  --shadow: 0 10px 26px rgba(30, 42, 90, .09), 0 0 0 1px rgba(30, 42, 90, .06);
  --shadow-lg: 0 16px 36px rgba(30, 42, 90, .12), 0 0 0 1px rgba(30, 42, 90, .06);
  --shadow-hover: 0 18px 40px rgba(30, 42, 90, .14);
  /* app.css names */
  --navy: #1E2A5A; --indigo: #1E2A5A;
  --yellow: #FFC93C; --yellow-soft: #FFE7A3;
  --cyan: #CDEDE4; --cyan-soft: #CDEDE4;
  --channel: #CFE8F6; --channel-soft: #FFD9BF;
  --mist: #F7EEDA; --paper: #FFFDF8; --line: #EDE4CB;
  --muted: #5D5869; --text: #1D1A26;
  --ok: #1F9E89; --ok-soft: #CDEDE4;
  --amber: #8A5A00; --amber-soft: #FFF0C2;
}

/* 3. Page and type ========================================================= */
body { font-family: var(--v-body); color: var(--text); background: var(--cream) !important; }
body, .main, .ambient-wrap { background-color: var(--cream); }
.ambient-blob { display: none !important; }
#app h1, #app h2, #app h3 { letter-spacing: normal; }
a { color: var(--navy); }
::selection { background: var(--sun); color: var(--navy); }

/* 4. Sidebar: a navy panel, the v3 logo label, a sunshine swatch on the current page ===== */
.side { color: #DCE3F4; background: var(--navy); padding: 22px 16px 18px; }
.side-brand { position: relative; isolation: isolate; align-self: flex-start; margin: 0 0 22px 6px; padding: 12px 18px 7px; transform: rotate(-4deg); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.side-brand::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--sun); -webkit-mask: var(--v-label) center / 100% 100% no-repeat; mask: var(--v-label) center / 100% 100% no-repeat; }
.side-brand:hover { transform: rotate(2deg) scale(1.04); }
.side-brand .brand-badge { display: none; }
.side-brand .brand-name, .side-brand .brand-mojo { font-family: var(--v-display); font-size: 32px; font-weight: 400; line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--navy); -webkit-text-stroke: .02em currentColor; }
.side-nav { gap: 16px; }
.side-label { margin-bottom: 4px; font-family: var(--v-slab); font-size: 12.5px; font-weight: 400; letter-spacing: .06em; color: var(--mint); }
.side-more summary.side-label { color: var(--mint); }
.side-link { position: relative; isolation: isolate; padding: 9px 14px; font-size: 15px; font-weight: 800; color: #DCE3F4; border-radius: 14px; }
.side-link svg { opacity: .9; }
.side-link:hover { color: #fff; background: rgba(255, 246, 224, .08); }
.side-link.is-active, .side-link.is-active:hover { color: var(--navy); background: none; box-shadow: none; }
.side-link.is-active::before { content: ''; position: absolute; inset: 0 -2px; z-index: -1; background: var(--sun); -webkit-mask: var(--v-swatch-2) center / 100% 100% no-repeat; mask: var(--v-swatch-2) center / 100% 100% no-repeat; }
.side-link--sub { font-weight: 700; }
/* Free uses box: calm, on the navy panel (no yellow text on navy). */
.side-uses { padding: 14px 16px 15px; color: #DCE3F4; background: rgba(255, 246, 224, .07); border: 0; border-radius: 18px; box-shadow: inset 0 0 0 1.5px rgba(255, 246, 224, .12); }
.side-uses-top b { font-family: var(--v-body); font-size: 16px; font-weight: 900; color: var(--cream); }
.side-uses-dots i { width: 10px; height: 10px; background: var(--mint); border-radius: 50% 46% 52% 48%; }
.side-uses-dots i.is-used { background: rgba(255, 246, 224, .2); }
.side-uses-what { font-weight: 700; color: #B9C3DE; }
.side-uses-what:hover { color: var(--cream); }
.side-uses-info { color: #DCE3F4; }
.side-uses-up { font-weight: 800; color: var(--mint); }
.side-uses-up:hover { color: var(--cream); }
.side-uses :focus-visible { outline-color: var(--sun); }
.side-user { background: rgba(255, 246, 224, .07); border-radius: 18px; }
.side-user-main > span > span { color: #B9C3DE; }
.side-av { color: var(--navy); background: var(--mint); border-radius: 50% 46% 52% 48%; }
.side-icon { color: #B9C3DE; }
.side-icon:hover { color: #fff; background: rgba(255, 246, 224, .1); }
.side-link:focus-visible { outline-color: var(--sun); }
/* Application pack's tool list (2026-10-26): same voice as the links above, one step smaller. */
.side-twist { color: #DCE3F4; border-radius: 50% 46% 52% 48%; }
.side-twist:hover { color: #fff; background: rgba(255, 246, 224, .08); }
.side-twist:focus-visible, .side-sub:focus-visible { outline-color: var(--sun); }
.side-subs { border-left: 2px dashed rgba(205, 237, 228, .35); }
.side-sub { position: relative; isolation: isolate; font-weight: 700; color: #DCE3F4; border-radius: 12px; }
.side-sub:hover { color: #fff; background: rgba(255, 246, 224, .08); }
.side-sub.is-active, .side-sub.is-active:hover { color: var(--navy); background: none; }
.side-sub.is-active::before { content: ''; position: absolute; inset: 0 -2px; z-index: -1; background: var(--sun); -webkit-mask: var(--v-swatch-1) center / 100% 100% no-repeat; mask: var(--v-swatch-1) center / 100% 100% no-repeat; }
.side-link.is-parent, .side-link.is-parent:hover { color: #fff; }
.side-link.is-parent svg { color: var(--mint); opacity: 1; }

/* Top bar: cream, with a white search pill. */
.header { background: rgba(255, 246, 224, .94) !important; border-bottom: 0 !important; box-shadow: 0 1px 0 rgba(30, 42, 90, .06); }
.header .logo { font-family: var(--v-display); font-size: 28px; text-transform: uppercase; letter-spacing: .02em; color: var(--navy); }
.header .logo-mojo { color: var(--navy) !important; }
.top-search { color: var(--muted); background: var(--paper); border: 0; box-shadow: inset 0 0 0 2px var(--line); }
.top-search:hover { background: var(--paper); box-shadow: inset 0 0 0 2px var(--navy); }
.top-search kbd { color: var(--navy); background: var(--cream); border: 0; }
.side-toggle { position: relative; isolation: isolate; color: var(--cream); background: none; }
.side-toggle::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--navy); -webkit-mask: var(--v-blob-e) center / 100% 100% no-repeat; mask: var(--v-blob-e) center / 100% 100% no-repeat; }
/* Count badges: sunshine pills with navy text (navy on the current page's sunshine swatch); the menu
   button's dot is sunshine with a cream ring so it reads on the navy blob and the cream bar. */
.side-count { font-family: var(--v-body); font-weight: 900; }
.side-toggle.has-count::after { top: 2px; right: 2px; width: 11px; height: 11px; background: var(--sun); box-shadow: 0 0 0 2.5px var(--cream); }

/* 5. Buttons: smooth swatches with hand-lettered caps ======================= */
/* Swatch only on the solid kinds, and never on a button that carries its own inline background. */
.btn { min-height: 44px; padding: 9px 18px 7px; font-family: var(--v-body); font-size: 15px; font-weight: 800; border-radius: 999px; }
:is(.btn-primary, .btn-outline, .btn-yellow, .btn-accent, .btn-danger, .btn-ghost-dark):not([style*="background"]) {
  position: relative; isolation: isolate; padding: 10px 20px 7px; font-family: var(--v-display); font-size: 21px; font-weight: 400; line-height: 1;
  letter-spacing: .03em; text-transform: uppercase; background: none !important; border: 0 !important; border-radius: 0; box-shadow: none !important;
  -webkit-text-stroke: .02em currentColor; transition: transform .18s cubic-bezier(.3, 1.4, .5, 1);
}
:is(.btn-primary, .btn-outline, .btn-yellow, .btn-accent, .btn-danger, .btn-ghost-dark):not([style*="background"])::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--btn, var(--navy));
  -webkit-mask: var(--v-swatch-1) center / 100% 100% no-repeat; mask: var(--v-swatch-1) center / 100% 100% no-repeat; transition: background-color .18s ease;
}
:is(.btn-primary, .btn-outline, .btn-yellow, .btn-accent, .btn-danger, .btn-ghost-dark):not([style*="background"]):hover { transform: translateY(-2px) rotate(-1.2deg); }
:is(.btn-primary, .btn-outline, .btn-yellow, .btn-accent, .btn-danger, .btn-ghost-dark):not([style*="background"]):active { transform: scale(.97); }
.btn-primary { --btn: var(--navy); color: var(--cream) !important; }
.btn-primary:hover { --btn: #16204A; }
.btn-outline { --btn: var(--mint); color: var(--navy) !important; }
.btn-outline::before { -webkit-mask-image: var(--v-swatch-2) !important; mask-image: var(--v-swatch-2) !important; box-shadow: none; }
.btn-outline:hover { --btn: #B6E4D7; }
.btn.btn-yellow { --btn: var(--sun); color: var(--navy) !important; }
.btn.btn-yellow::before { -webkit-mask-image: var(--v-swatch-2); mask-image: var(--v-swatch-2); }
.btn.btn-yellow:hover { --btn: #FFBC14; }
.btn-accent { --btn: var(--tang); color: var(--navy) !important; }
.btn-danger { --btn: #B3261E; color: #fff !important; }
.btn.btn-ghost-dark { --btn: rgba(255, 246, 224, .14); color: var(--cream) !important; }
.btn-ghost { font-weight: 800; color: var(--navy); border-radius: 999px; }
.btn-ghost:hover { color: var(--navy); background: var(--mist); }
.btn .spinner, .btn.loading::after { border-color: currentColor; border-right-color: transparent; }
.btn:focus-visible { outline: 3px solid var(--navy) !important; outline-offset: 3px; border-radius: 14px; box-shadow: none !important; }

/* 6. Cards, chips, statuses, rings ========================================= */
.card, .db-card, .ap-card, .ap-stat { background: var(--paper); border: 0 !important; border-radius: 26px; box-shadow: var(--shadow); }
.card:hover { box-shadow: var(--shadow-lg); }
.ap-card--accent::before, .db-continue::before { display: none; }
.cvm-status { padding: 4px 11px 3px; font-size: 12px; font-weight: 900; letter-spacing: .02em; color: var(--navy); background: #F3E3BF; }
.cvm-status::before { width: 7px; height: 7px; border-radius: 50% 45% 55% 50%; }
.cvm-status--ok { color: var(--teal-t); background: var(--mint); }
.cvm-status--warn { color: var(--gold-t); background: #FFE7A3; }
.cvm-status--low { color: var(--tang-t); background: #FFD9BF; }
.cvm-status--info { color: var(--navy); background: #F3E3BF; }
.cvm-sticker { padding: 7px 13px 5px; font-family: var(--v-display); font-size: 19px; font-weight: 400; line-height: 1; letter-spacing: .03em; text-transform: uppercase; color: var(--navy); background: var(--sun); border-radius: 999px; box-shadow: none; }
.cvm-sticker--navy { color: var(--cream); background: var(--navy); }
.cvm-ring .bg { stroke: var(--mist); }
.cvm-ring .fg { stroke: var(--teal); }
.cvm-ring.tone-warn .fg { stroke: var(--sun-d); }
.cvm-ring.tone-low .fg { stroke: var(--tang); }
.cvm-ring b { font-family: var(--v-display); font-weight: 400; letter-spacing: 0; color: var(--navy); }
.cvm-ring--md b { font-size: 40px; }
.cvm-ring--sm b { font-size: 17px; }
.cvm-sheet { border-radius: 8px; }
.cvm-sheet i { background: #ECE5D3; }
.cvm-sheet i.is-marked { background: var(--sun); box-shadow: 0 0 0 2px var(--sun); }
.cvm-sheet b { font-family: var(--v-display); font-weight: 400; font-size: 11px; text-transform: uppercase; }

/* 7. Dashboard =============================================================== */
.db { gap: 26px; }
.db-col, .db-list, .db-steps, .db-feed, .ap-history { grid-template-columns: minmax(0, 1fr); } /* v2's column could grow past the screen on phones */
.db-continue-info { min-width: 0; }
.db-verify { color: var(--navy); background: #FFF0C2; border: 0; border-radius: 18px; }
.db-verify svg { color: var(--tang-t); }
.db-link { color: var(--navy); text-decoration-color: var(--tang); text-decoration-thickness: 2px; }
.db-head { position: relative; align-items: flex-end; }
.db-hello { margin: 0 0 2px; font-family: var(--v-slab); font-size: clamp(18px, 1.8vw, 24px); font-weight: 400; line-height: 1.05; text-transform: uppercase; color: var(--tang-t); }
.db-name { margin: 0 0 18px; font-family: var(--v-display); font-size: clamp(64px, 7vw, 104px); font-weight: 400; line-height: .86; letter-spacing: .01em; text-transform: uppercase; color: var(--navy); -webkit-text-stroke: .028em currentColor; }
.db-mark { position: relative; z-index: 0; display: inline-block; padding: 0; background: none; }
.db-mark::after { content: ''; position: absolute; z-index: -1; left: -3%; right: -6%; bottom: -.05em; height: .26em; background: var(--sun); -webkit-mask: var(--v-stroke) center / 100% 100% no-repeat; mask: var(--v-stroke) center / 100% 100% no-repeat; }
.db-pills { gap: 8px; }
.db-pill { padding: 6px 13px 5px; font-size: 13px; font-weight: 800; color: var(--navy); background: var(--paper); border: 0; box-shadow: inset 0 0 0 2px var(--line); }
.db-pill svg { color: var(--tang-t); }
.db-pill--pro { background: var(--sun); box-shadow: none; }
.db-pill--pro svg { color: var(--navy); }
.db-pill--badge { background: var(--mint); box-shadow: none; }
.db-pill--badge svg { color: var(--teal-t); }
.db-head-actions .btn { min-height: 54px; font-size: 24px; padding: 12px 24px 9px; }
.db-notice { padding: 13px 18px; background: var(--paper); border: 0; border-left: 0; border-radius: 20px; box-shadow: var(--shadow-sm); }
.db-notice::before { content: ''; flex: none; width: 10px; height: 34px; background: var(--mint); border-radius: 999px; }
.db-notice--bell::before { background: var(--sun); }
.db-notice:hover { box-shadow: var(--shadow-lg); }
.db-notice-text b { color: var(--navy); }
.db-av { color: var(--navy); background: var(--sky); border-radius: 50% 46% 52% 48%; }
.db-av--bell { background: var(--sun); }
.db-card { padding: 28px; }
.db-card-h h2 { font-family: var(--v-display); font-size: 34px; font-weight: 400; line-height: .9; letter-spacing: .01em; text-transform: uppercase; color: var(--navy); -webkit-text-stroke: .02em currentColor; }
.db-card-h a { font-weight: 800; color: var(--navy); text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.db-label { font-family: var(--v-slab); font-size: 14px; font-weight: 400; letter-spacing: .04em; color: var(--tang-t); }
/* Continue where you left off: a tilted sheet on a sunshine blob. */
.db-continue { overflow: hidden; }
.db-sheet { position: relative; isolation: isolate; padding: 22px 24px; background: none; }
.db-sheet::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #1F9E89; -webkit-mask: var(--v-blob-a) center / 100% 100% no-repeat; mask: var(--v-blob-a) center / 100% 100% no-repeat; }
.db-continue-info h2 { font-family: var(--v-display); font-size: 44px; font-weight: 400; line-height: .9; letter-spacing: .01em; text-transform: uppercase; color: var(--navy); -webkit-text-stroke: .02em currentColor; }
.db-meta { color: var(--muted); }
.db-nudge { color: var(--text); background: var(--cream); border-radius: 16px; }
.db-nudge svg { color: var(--tang-t); }
.db-tools { border-top: 2px dashed var(--line); }
.db-tools-label { font-family: var(--v-slab); font-size: 13px; font-weight: 400; letter-spacing: .04em; color: var(--tang-t); }
.db-tool { font-weight: 800; color: var(--navy); background: var(--cream); border: 0; box-shadow: inset 0 0 0 2px transparent; }
.db-tool:hover { color: var(--navy); background: var(--sun-l); box-shadow: none; }
.db-tool svg { color: var(--tang-t); }
.db-row { border-radius: 16px; }
.db-row:hover { background: var(--cream); }
.db-row-main b { font-weight: 900; color: var(--navy); }
.db-logo { color: var(--navy); background: var(--tone, var(--mint)); border-radius: 50% 46% 52% 48%; }
.db-empty { background: var(--cream); border-radius: 20px; }
.db-score-label { font-family: var(--v-display); font-size: 30px; font-weight: 400; line-height: .9; text-transform: uppercase; color: var(--navy); }
.db-bar { height: 10px; background: var(--mist); border-radius: 999px; }
.db-bar i { background: var(--navy); border-radius: 999px; }
.db-bar--yellow i { background: var(--sun); box-shadow: none; }
.db-check { border-color: #D9CFB3; }
.db-step.is-done .db-check { background: var(--teal); border-color: var(--teal); }
.db-step:hover:not(:disabled) { background: var(--cream); }
.db-step-text b { font-weight: 900; }
/* Review and earn: the one navy card, cream and mint type. */
.db-review { color: var(--on-navy); background: var(--navy); box-shadow: 0 16px 36px rgba(30, 42, 90, .24); }
.db-review .db-label { color: var(--mint); }
.db-review h2 { font-family: var(--v-display); font-size: 40px; font-weight: 400; line-height: .9; letter-spacing: .01em; text-transform: uppercase; color: var(--cream); }
.db-review .db-next { background: rgba(255, 246, 224, .08); border-radius: 14px; }
.db-review .db-next b { color: var(--cream); }
/* First visit (no CVs): three paths in blob tiles. */
.db-welcome { padding: 40px; background: var(--paper); border: 0; border-radius: 30px; box-shadow: var(--shadow); }
.db-kicker { font-family: var(--v-slab); font-size: 18px; font-weight: 400; text-transform: uppercase; color: var(--tang-t); }
.db-welcome h2 { font-family: var(--v-display); font-size: clamp(48px, 5vw, 76px); font-weight: 400; line-height: .9; letter-spacing: .01em; text-transform: uppercase; color: var(--navy); }
.db-path { background: var(--tone-soft, var(--cream)); border: 0; border-radius: 26px; }
.db-path:hover { border: 0; box-shadow: var(--shadow-lg); }
.db-path--yellow { --tone-soft: #FFF0C2; }
.db-path--cyan { --tone-soft: var(--mint); }
.db-path--channel { --tone-soft: var(--sky); }
.db-path-ic { position: relative; isolation: isolate; background: none; border-radius: 0; box-shadow: none; }
.db-path-ic::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--paper); -webkit-mask: var(--v-blob-e) center / 100% 100% no-repeat; mask: var(--v-blob-e) center / 100% 100% no-repeat; }
.db-path b { font-family: var(--v-display); font-size: 30px; font-weight: 400; line-height: .9; text-transform: uppercase; }
.db-path-go { color: var(--navy); font-weight: 900; }
/* Your tools and the "works on your CV" page (2026-10-26). */
.tt-group-h { font-family: var(--v-slab); font-size: 13.5px; font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--tang-t); }
.tt:hover { background: var(--cream); }
.tt-ic, .nc-ic, .nc-way-ic { border-radius: 52% 46% 55% 45% / 47% 55% 45% 53%; }
.tt-ic--apply { background: #FFF0C2; }
.tt-ic--cv { background: var(--mint); }
.tt-ic--leave { background: var(--sky); }
.tt-ic--money { background: #FFD9BF; }
.tt-text b { font-weight: 900; }
.tt-tag { font-weight: 900; background: #FFF0C2; }
.tt-tag--free, .tt-tag--pro { color: var(--teal-t); background: var(--mint); }
.tt-tag--out { color: var(--tang-t); background: #FFE9DA; }
.tt-tag--cv { color: var(--muted); background: none; box-shadow: inset 0 0 0 1.5px var(--line); }
.nc { border-radius: 30px; }
.nc-ic { background: var(--sun); }
#app .nc-title { font-family: var(--v-display); font-size: 46px !important; font-weight: 400; line-height: .9; letter-spacing: .01em; text-transform: uppercase; color: var(--navy); -webkit-text-stroke: .02em currentColor; }
.nc-way { background: var(--cream); border: 0; box-shadow: inset 0 0 0 2px transparent; border-radius: 22px; }
.nc-way:hover { box-shadow: inset 0 0 0 2px var(--navy); }
.nc-way--main { background: #FFF0C2; }
.nc-way-text b { font-weight: 900; }
.nc-also-h { font-family: var(--v-slab); font-size: 14px; font-weight: 400; letter-spacing: .04em; color: var(--tang-t); }
@media (max-width: 640px) { #app .nc-title { font-size: 38px !important; } }
.tool-cv--none { background: #FFF0C2; }
.tl-nocv-ic { background: var(--paper); border-radius: 52% 46% 55% 45% / 47% 55% 45% 53%; }
.sal-kicker, .br-opt-top b { font-family: var(--v-slab); font-size: 13.5px; font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--tang-t); }
.sal-median b { font-family: var(--v-display); font-size: clamp(56px, 7vw, 76px); font-weight: 400; letter-spacing: .01em; }
.sal-bar { background: linear-gradient(90deg, var(--mint), #FFF0C2 55%, #FFD9BF); }
.sal-bar i { border-color: var(--paper); }
.br-text { font-weight: 800; }
.sgm-prev { background: #fff; border-radius: 22px; }
.sgm-prev.is-empty { background: var(--cream); }
#app .sgm-h { font-family: var(--v-display); font-size: 34px !important; font-weight: 400; line-height: .9; letter-spacing: .01em; text-transform: uppercase; color: var(--navy); -webkit-text-stroke: .02em currentColor; }
#app .sgs .sgm-h { font-family: var(--v-body); font-size: 15.5px !important; font-weight: 800; line-height: 1.3; text-transform: none; -webkit-text-stroke: 0; }
.sgp-uses-h { font-family: var(--v-slab); font-size: 14px; font-weight: 400; letter-spacing: .04em; color: var(--tang-t); }
.db-unlocks { border-top: 2px dashed var(--line); }
.db-unlocks svg { color: var(--teal-t); }

/* 8. Shared toolkit for every rebuilt page (ap-*) ================================ */
.ap { gap: 26px; grid-template-columns: minmax(0, 1fr); } /* v2's implicit column grew past the screen on phones */
.ap-crumbs { font-weight: 800; color: var(--muted); }
.ap-crumbs li + li::before { content: '>'; color: var(--navy); }
.ap-crumbs a { color: var(--text); }
.ap-crumbs a:hover { color: var(--navy); text-decoration-color: var(--sun); }
.ap-kicker { margin-bottom: 4px; font-family: var(--v-slab); font-size: clamp(16px, 1.6vw, 21px); font-weight: 400; line-height: 1.05; text-transform: uppercase; color: var(--tang-t); }
.ap-title { font-family: var(--v-display); font-size: clamp(52px, 5.6vw, 84px); font-weight: 400; line-height: .88; letter-spacing: .01em; text-transform: uppercase; color: var(--navy); -webkit-text-stroke: .028em currentColor; }
.ap-sub { margin-top: 12px; font-size: 17px; color: var(--muted); }
.ap-tabs { padding: 5px; background: var(--paper); border: 0; box-shadow: var(--shadow-sm); }
.ap-tab { font-weight: 800; color: var(--navy); }
.ap-tab:hover { color: var(--navy); background: var(--cream); }
.ap-tab[aria-selected="true"] { color: var(--cream); background: var(--navy); }
.ap-count { font-weight: 900; color: var(--navy); background: var(--mist); }
.ap-tab[aria-selected="true"] .ap-count { color: var(--navy); background: var(--sun); }
.ap-card { padding: 28px; }
.ap-card--navy { color: var(--on-navy); background: var(--navy); }
.ap-card--navy h2, .ap-card--navy h3 { color: var(--cream); }
.ap-section-title { font-family: var(--v-display); font-size: 32px; font-weight: 400; line-height: .9; letter-spacing: .01em; text-transform: uppercase; color: var(--navy); -webkit-text-stroke: .02em currentColor; }
/* Stat tiles: a solid blob in the corner instead of a top bar. */
.ap-stat { isolation: isolate; padding: 24px 22px 20px; }
.ap-stat::before { left: auto; right: -30px; top: -30px; width: 96px; height: 96px; z-index: -1; background: var(--accent, var(--sun)); -webkit-mask: var(--v-blob-a) center / 100% 100% no-repeat; mask: var(--v-blob-a) center / 100% 100% no-repeat; }
.ap-stat--yellow { --accent: var(--sun); }
.ap-stat--cyan { --accent: var(--mint); }
.ap-stat--channel { --accent: var(--sky); }
.ap-stat--indigo { --accent: var(--tang); }
.ap-stat-n { font-family: var(--v-display); font-size: 54px; font-weight: 400; line-height: .9; letter-spacing: 0; color: var(--navy); }
.ap-stat-l { font-weight: 900; letter-spacing: .02em; color: var(--muted); }
/* Empty states: a solid blob with the icon, on paper. */
.ap-empty, .tool-idle { background: var(--paper); border: 0; border-radius: 30px; box-shadow: var(--shadow-sm); }
.ap-empty-ic { position: relative; isolation: isolate; width: 96px; height: 96px; background: none; border-radius: 0; transform: rotate(-8deg); }
.ap-empty-ic::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--sun); -webkit-mask: var(--v-blob-a) center / 100% 100% no-repeat; mask: var(--v-blob-a) center / 100% 100% no-repeat; }
.ap-empty h3, .tool-idle h3 { font-family: var(--v-display); font-size: 38px; font-weight: 400; line-height: .9; letter-spacing: .01em; text-transform: uppercase; color: var(--navy); }
.ap-av, .db-av, .side-av { border-radius: 50% 46% 52% 48%; }
.ap-av { color: var(--cream); background: var(--navy); }
.ap-av--cyan { color: var(--navy); background: var(--mint); }
.ap-av--yellow { color: var(--navy); background: var(--sun); }
.ap-av--channel { color: var(--navy); background: var(--sky); }
.ap-icon-btn:hover { color: var(--navy); background: var(--cream); }
.ap-menu { background: var(--paper); border: 0; border-radius: 20px; box-shadow: 0 24px 50px rgba(30, 42, 90, .2); }
.ap-menu button { font-weight: 700; color: var(--navy); border-radius: 12px; }
.ap-menu button:hover { background: var(--cream); }
.ap-menu button svg { color: var(--tang-t); }
.ap-menu button.is-danger, .ap-menu button.is-danger svg { color: #B3261E; }
.ap-menu hr { border-top-color: var(--line); }
.ap-switch-track { background: #D9CFB3; }
.ap-switch input:checked + .ap-switch-track { background: var(--teal); }
.ap-row { border-radius: 16px; }
.ap-row:hover { background: var(--cream); }
.ap-row-main b { font-weight: 900; color: var(--navy); }
.ap-chip { font-weight: 800; color: var(--navy); background: var(--paper); border: 0; box-shadow: inset 0 0 0 2px var(--line); }
.ap-chip:hover { color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.ap-chip[aria-pressed="true"] { color: var(--cream); background: var(--navy); box-shadow: none; }

/* 9. Forms ================================================================== */
.form-input, .ap-input, .ap-textarea, .ap-select, input.form-input, select.form-input, textarea.form-input {
  font-family: var(--v-body); font-weight: 600; color: var(--text); background: var(--paper); border: 2px solid #E3D7B8; border-radius: 16px; }
.form-input:focus, .ap-input:focus, .ap-textarea:focus, .ap-select:focus { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(30, 42, 90, .14); }
.form-label, .ap-field > label, .ap-label { font-weight: 800; color: var(--text); }
.ap-hint { color: var(--muted); }
.ap-seg { background: var(--mist); }
.ap-seg button { font-weight: 800; color: var(--navy); }
.ap-seg button[aria-pressed="true"] { color: var(--cream); background: var(--navy); }
.ap-error { color: #8C1D18; background: #FDECEC; border-radius: 14px; }
.ap-linkish { color: var(--navy); font-weight: 800; text-decoration-color: var(--sun); text-decoration-thickness: 3px; }

/* Display heads keep their size: the SPA forces h1/h2 down with !important on small screens. */
#app .db-name { font-size: clamp(64px, 7vw, 104px) !important; }
#app .ap-title { font-size: clamp(52px, 5.6vw, 84px) !important; }
#app .db-card-h h2 { font-size: 34px !important; }
#app .db-continue-info h2 { font-size: 44px !important; }
#app .db-review h2 { font-size: 40px !important; }
#app .db-welcome h2 { font-size: clamp(48px, 5vw, 76px) !important; }
#app .ap-section-title { font-size: 32px !important; }
#app .ap-empty h3, #app .tool-idle h3 { font-size: 38px !important; }

/* Mobile top bar: the v3 logo label instead of the square badge. */
.header .logo { position: relative; isolation: isolate; gap: 0; padding: 9px 14px 5px; transform: rotate(-3deg); }
.header .logo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--sun); -webkit-mask: var(--v-label) center / 100% 100% no-repeat; mask: var(--v-label) center / 100% 100% no-repeat; }
.header .logo .brand-badge { display: none; }
.header .logo .brand-name, .header .logo .brand-mojo { font-family: var(--v-display); font-size: 24px; font-weight: 400; line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--navy); }

/* 10. Mobile ================================================================ */
@media (max-width: 960px) {
  .side { box-shadow: none; }
  body.side-open .side { box-shadow: 24px 0 60px rgba(30, 42, 90, .35); }
}
@media (max-width: 760px) {
  #app .db-name { font-size: clamp(60px, 18vw, 84px) !important; }
  #app .ap-title { font-size: clamp(48px, 13vw, 66px) !important; }
  #app .db-continue-info h2 { font-size: 38px !important; }
  .db-continue-info { width: 100%; }
  .db-row .cvm-status { padding: 3px 8px; font-size: 11px; }
  .db-row { gap: 10px; padding: 10px 6px; }
  .db-head-actions .btn { flex: 1; }
  .db-head-actions .btn { min-height: 50px; font-size: 21px; }
  .db-card, .ap-card { padding: 22px 20px; }
  .db-continue-info h2 { font-size: 38px; }
  .ap-title { font-size: clamp(48px, 13vw, 66px); }
  .db-welcome { padding: 28px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .side-brand, .btn, .btn::before { transition: none !important; }
}

/* 11. Shared chrome: dialogs, toasts, panels, tags, skeletons ===================== */
.modal-overlay { background: rgba(30, 42, 90, .45); }
.modal-box { background: var(--paper); border-radius: 26px; box-shadow: 0 30px 70px rgba(30, 42, 90, .3); }
.modal-header { padding: 18px 22px; border-bottom: 2px dashed var(--line); }
.modal-header-title { font-family: var(--v-display); font-size: 28px; font-weight: 400; line-height: 1; text-transform: uppercase; color: var(--navy); }
.modal-close { color: var(--muted); border-radius: 50%; }
.modal-close:hover { color: var(--navy); background: var(--cream); }
.modal-tab { font-weight: 800; color: var(--muted); }
.modal-tab.active, .modal-tab[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--sun); }
.slide-panel-overlay { background: rgba(30, 42, 90, .35); }
.slide-panel { background: var(--paper); border-radius: 26px 0 0 26px; box-shadow: none; }
.slide-panel.open { box-shadow: -18px 0 50px rgba(30, 42, 90, .2); } /* closed, its shadow leaked onto the page edge */
.slide-panel-header { border-bottom: 2px dashed var(--line); }
#slidePanelTitle { font-family: var(--v-display); font-size: 30px !important; font-weight: 400 !important; line-height: 1; text-transform: uppercase; color: var(--navy) !important; }
.slide-panel-close:hover { background: var(--cream); color: var(--navy); }
.toast { font-weight: 700; color: var(--text); background: var(--paper); border-left: 0; border-radius: 18px; box-shadow: 0 16px 36px rgba(30, 42, 90, .2); display: flex; align-items: center; gap: 10px; }
.toast::before { content: ''; flex: none; width: 10px; height: 26px; background: var(--sky); border-radius: 999px; }
.toast-success::before { background: var(--teal); }
.toast-error::before { background: #B3261E; }
.tag { padding: 4px 11px 3px; font-weight: 800; border-radius: 999px; }
.tag-primary { color: var(--navy); background: var(--sky); }
.tag-accent { color: var(--tang-t); background: #FFE3D3; }
.tag-success { color: var(--teal-t); background: var(--mint); }
.tag-gold { color: var(--gold-t); background: #FFF0C2; }
.tag-platinum { color: var(--navy); background: var(--sky-l); }
.skeleton { background: linear-gradient(90deg, #F3EAD3 25%, #FBF4E2 50%, #F3EAD3 75%) !important; background-size: 200% 100% !important; }
.skeleton-card { background: var(--paper) !important; border: 0 !important; border-radius: 26px !important; }
.tabs { border-bottom: 2px dashed var(--line); }
.tab { font-weight: 800; color: var(--muted); }
.tab.active { color: var(--navy) !important; border-bottom-color: var(--sun) !important; }
/* The command palette (Ctrl K). */
#cmdPalette > div, #cmdPalette [class*="box"] { border-radius: 26px !important; }
#cmdInput { font-family: var(--v-body) !important; font-weight: 700; }

/* 12. Upgrade dialog and pass prompts (app-upgrade) ================================ */
.cvm-up { background: var(--paper); border-radius: 28px; box-shadow: 0 30px 70px rgba(30, 42, 90, .3); }
.cvm-up::backdrop { background: rgba(30, 42, 90, .45); }
.cvm-up.is-fallback { box-shadow: 0 0 0 100vmax rgba(30, 42, 90, .45); }
.cvm-up-x:hover { background: var(--cream); }
.cvm-up-ic { position: relative; isolation: isolate; width: 58px; height: 58px; background: none; border-radius: 0; }
.cvm-up-ic::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--sun); -webkit-mask: var(--v-blob-a) center / 100% 100% no-repeat; mask: var(--v-blob-a) center / 100% 100% no-repeat; }
.cvm-up-ic--ok { color: var(--teal-t); }
.cvm-up-ic--ok::before { background: var(--mint); }
#app .cvm-up h2, .cvm-up h2, .cvm-up-done h1 { font-family: var(--v-display); font-size: 40px !important; font-weight: 400; line-height: .9; letter-spacing: .01em; text-transform: uppercase; color: var(--navy); }
.cvm-up--use h2 { font-size: 34px !important; }
.cvm-up-foot--use { border-top: 2px dashed var(--line); }
.cvm-up-opt { background: var(--cream); border: 0; border-radius: 22px; }
.cvm-up-opt--pass { color: var(--cream); background: var(--navy); border: 0; }
.cvm-up-opt--pass h3, .cvm-up-opt--pass .cvm-up-q, .cvm-up-opt--pass .cvm-up-price b { color: var(--cream); }
.cvm-up-opt--pass .cvm-up-price, .cvm-up-opt--pass .cvm-up-line { color: var(--on-navy); }
.cvm-up-opt--pass .btn-primary { --btn: var(--sun); color: var(--navy) !important; }
.cvm-up-opt h3 { font-family: var(--v-display); font-size: 30px; font-weight: 400; line-height: .9; text-transform: uppercase; }
.cvm-up-price b { font-family: var(--v-display); font-size: 40px; font-weight: 400; letter-spacing: 0; }
.cvm-up-tag { padding: 4px 11px 3px; font-weight: 900; color: var(--navy); background: var(--sun); }
.cvm-up-later { font-weight: 800; }
.cvm-up-later:hover { background: var(--cream); }
.cvm-up-ends { background: #FFF0C2; border-radius: 16px; }
.cvm-up-nudge { color: var(--navy); background: var(--paper); border: 0; border-radius: 22px; box-shadow: 0 20px 44px rgba(30, 42, 90, .24), inset 0 0 0 2px var(--line); }
.tool-cost--out { background: #FFE9DA; box-shadow: none; }
.cvm-track { background: var(--paper); border-radius: 22px; box-shadow: 0 20px 44px rgba(30, 42, 90, .24), inset 0 0 0 2px var(--line); }
.cvm-track-ic { background: var(--sun); border-radius: 50% 46% 52% 48%; }
.cvm-track-q b { font-weight: 900; }
.cvm-track-later:hover { background: var(--cream); }
.cvm-track button:focus-visible { outline-color: var(--navy); }

/* 13. First run, saving a check, welcome banner (app-firstrun) ===================== */
#app .fr-title { font-family: var(--v-display); font-size: clamp(52px, 5.6vw, 84px) !important; font-weight: 400; line-height: .88; letter-spacing: .01em; text-transform: uppercase; color: var(--navy); -webkit-text-stroke: .028em currentColor; }
.fr-import { border-top: 0; }
.fr-alt-card { background: var(--tone, var(--cream)); border: 0; border-radius: 26px; }
.fr-alt-card:hover { border: 0; box-shadow: var(--shadow-lg); }
.fr-alt-card--yellow { --tone: #FFF0C2; }
.fr-alt-card--channel { --tone: var(--sky); }
.fr-alt-ic { position: relative; isolation: isolate; background: none; border-radius: 0; box-shadow: none; }
.fr-alt-ic::before { content: ''; position: absolute; inset: -4px; z-index: -1; background: var(--paper); -webkit-mask: var(--v-blob-e) center / 100% 100% no-repeat; mask: var(--v-blob-e) center / 100% 100% no-repeat; }
.fr-alt-text b { font-family: var(--v-display); font-size: 28px; font-weight: 400; line-height: .9; text-transform: uppercase; color: var(--navy); }
.fr-alt-card > svg:last-child { color: var(--navy); }
.fr-ic { position: relative; isolation: isolate; background: none; border-radius: 0; }
.fr-ic::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--sun); -webkit-mask: var(--v-blob-a) center / 100% 100% no-repeat; mask: var(--v-blob-a) center / 100% 100% no-repeat; }
.fr-saving--error .fr-ic { color: #8C1D18; }
.fr-saving--error .fr-ic::before { background: #FDECEC; }
.cvp-welcome { background: #FFF0C2; border-radius: 26px; }
#app .cvp-welcome h2 { font-family: var(--v-display); font-size: 36px !important; font-weight: 400; line-height: .9; text-transform: uppercase; color: var(--navy); }
.cvp-welcome-fix::before { font-family: var(--v-display); font-size: 18px; font-weight: 400; background: var(--sun); border-radius: 50%; }

/* 14. Every module: icon tiles become organic blobs, heads take the display face ===== */
/* Icon tiles keep their own (remapped) colour and tilt; only the outline changes. */
:is(.ad-dlg-ic, .ad-push-ic, .an-strip-ic, .ch-depth-ic, .ch-resume-ic, .co-item-ic, .cvp-tool-ic, .ec-sec-ic, .jb-dialog-ic, .jb-ss-ic, .jd-mini-ic,
    .jd-tile-ic, .lb-me-ic, .mc-dialog-ic, .mc-new-ic, .nt-ic, .pf-badge-ic, .pf-confirm-ic, .pf-link-ic, .pf-row-ic, .pk-ic, .pk-ready-ic, .ps-band-ic,
    .ps-cta-ic, .ps-drop-ic, .rv-vote-ic, .sks-guide-ic, .st-ev-ic, .st-note-ic, .st-upsell-ic, .tl-cat-ic, .tl-item-ic, .tool-ic, .up-drop-ic, .up-file-ic,
    .up-found-ic, .up-intro-ic, .up-panel-ic, .wz-resume-ic, .wz-sum-ic, .wz-tip-ic) {
  border-radius: 52% 46% 55% 45% / 47% 55% 45% 53% !important; box-shadow: none !important;
}
.mc-new-ic, .up-drop-ic { background: var(--sun) !important; }
/* Page-level heads. */
:is(.an-hero h2, .st-hero h2, .pf-name, .pf-sys h1, .rv-done h1, .ps-title, .wz-h, .co-start h2, .ch-create h2, .mc-empty h2, .st-empty h2, .mc-create-head h2) {
  font-family: var(--v-display) !important; font-size: clamp(42px, 4.4vw, 64px) !important; font-weight: 400 !important; line-height: .9 !important;
  letter-spacing: .01em !important; text-transform: uppercase; color: var(--navy); -webkit-text-stroke: .02em currentColor;
}
/* Section and card heads. */
:is(.cvp-scan-head h2, .pk-ready h2, .jb-res-head h2, .ec-sec-head h2, .jd-h2, .jd-tool-head h3, .st-upsell h2, .tl-res-head h2, .tl-finish h2, .tl-hero h3,
    .up-panel-h h2, .up-drop-t, .ps-band h2, .ps-comments-h, .ps-cta h2, .mc-title) {
  font-family: var(--v-display) !important; font-size: 32px !important; font-weight: 400 !important; line-height: .92 !important; letter-spacing: .01em !important;
  text-transform: uppercase; color: var(--navy); -webkit-text-stroke: .015em currentColor;
}
.mc-title { font-size: 30px !important; }
/* Dialog heads. */
:is(.ad-dialog h2, .mc-dialog h2, .jb-dialog h2, .ps-dialog-h h2) {
  font-family: var(--v-display) !important; font-size: 36px !important; font-weight: 400 !important; line-height: .9 !important; text-transform: uppercase; color: var(--navy);
}
/* Big numbers. */
:is(.an-fig-n, .an-big, .pf-stat b, .pf-fig-n, .lb-pod-metric b, .lb-me-n, .jd-pay b, .tl-cat-score, .lb-step) {
  font-family: var(--v-display) !important; font-weight: 400 !important; letter-spacing: 0 !important;
}
.an-fig-n, .pf-fig-n, .lb-me-n { font-size: 52px !important; line-height: .9 !important; }
/* Dialogs built by the parts (<dialog> elements). */
:is(.mc-dialog, .ad-dialog, .jb-dialog, .ps-dialog, .pf-confirm) { background: var(--paper); border: 0; border-radius: 28px; box-shadow: 0 30px 70px rgba(30, 42, 90, .3); }
:is(.mc-dialog, .ad-dialog, .jb-dialog, .ps-dialog, .pf-confirm)::backdrop { background: rgba(30, 42, 90, .45); }

/* 15. My CVs ========================================================================= */
.mc-card { background: var(--paper); border: 0; border-radius: 26px; box-shadow: var(--shadow); overflow: hidden; }
.mc-card:hover { box-shadow: var(--shadow-lg); }
.mc-thumb { border-top: 0 !important; margin: 0; }
.mc-new { background: rgba(255, 253, 248, .6); border: 2px dashed #E3D7B8; border-radius: 26px; }
.mc-new:hover { background: var(--paper); border-color: var(--navy); }
.mc-new b { font-family: var(--v-display); font-size: 30px; font-weight: 400; line-height: .9; text-transform: uppercase; }
.mc-group-h { font-family: var(--v-slab); font-size: 13px; font-weight: 400; letter-spacing: .04em; color: var(--tang-t); }

/* 16. Upload ========================================================================== */
.up-drop { border-color: #E3D7B8 !important; border-radius: 26px !important; background: var(--cream); }
.up-drop:hover, .up-drop.is-over { border-color: var(--navy) !important; background: var(--sun-l); }

/* 17. Notifications ===================================================================== */
.nt-row.is-unread { background: #FFF3CF; }
a.nt-row.is-unread:hover { background: var(--sun-l); }
.nt-row.is-unread .nt-dot { background: var(--tang); box-shadow: 0 0 0 4px rgba(255, 138, 61, .18); }

/* 18. Pages not rebuilt yet (settings, edit profile, pools, portfolio...) ====================== */
/* Their titles are h1s with inline sizes; give them the display face. Never inside a CV design. */
#app h1[style]:not(.cv-template h1, .tpl-thumb h1, #exCvContainer h1, #cvVerPreview h1, #cvPreviewArea h1, #wizPreview h1, .cvx h1) {
  font-family: var(--v-display) !important; font-size: clamp(40px, 4vw, 58px) !important; font-weight: 400 !important; line-height: .92 !important;
  letter-spacing: .01em !important; text-transform: uppercase;
}

/* 19. Hard-coded v2 colours in the parts, moved to the palette ================================= */
/* Score bars and accents: warn = deep sunshine, low = tangerine (matches the rings). */
.jd-bar--warn i, .tl-bar--warn i, .cvp-bar--warn i { background: var(--sun-d); }
.jd-bar--low i, .tl-bar--low i, .cvp-bar--low i { background: var(--tang); }
.tl-acc--warn, .cvp-review--warn { --accent: var(--sun-d); --rv: var(--sun-d); }
.tl-acc--low, .cvp-review--low { --accent: var(--tang); --rv: var(--tang); }
.rv-vote--low .rv-vote-ic { color: var(--navy); background: var(--tang); }
.rv-vote--warn[aria-checked="true"] { background: #FFF0C2; border-color: var(--sun-d); }
.rv-vote--low[aria-checked="true"] { background: #FFE3D3; border-color: var(--tang); }

.ec-bar.is-dirty .ec-dot { background: var(--sun-d); }
.ad-flag { border-left-color: var(--sun-d); }
/* Charts. */
.an-wrap, .an, [class^="an-"], .ad, .st, .pf { --an-series-hot: #1E2A5A; --ad-series-hot: #1E2A5A; --st-series-hot: #1E2A5A; --an-needs: #E9A01A; --pf-needs: #E9A01A; }
:root { --an-series-hot: #1E2A5A; --ad-series-hot: #1E2A5A; --st-series-hot: #1E2A5A; --an-needs: #E9A01A; --pf-needs: #E9A01A; }
/* Lavender tints become sky. */
.pk-weight, .jb-skills { color: var(--navy); background: var(--sky-l); }
.ch-rec.is-busy { color: var(--navy); background: var(--sky-l); }
.ds-tone--like, .ps-tone--like { --tone: var(--navy); --tone-soft: var(--sky-l); }
.ec-sec--indigo { --ec-soft: var(--sky-l); }
.up-panel--indigo { --up-soft: var(--sky-l); }
/* Lemon borders and hovers become warm. */
.ch-resume, .st-upsell, .pk-next, .an-strip { border-color: transparent !important; }
.ch-bubble.is-current, .lb-item.is-me .lb-row { box-shadow: inset 0 0 0 2px var(--sun-l); }
.ad-sel[data-cur="pro"], .ad-sel[data-cur="enterprise"] { border-color: var(--sun-d); }
.ch-mic:hover, .pf-av-btn:hover { background: #FFBC14; }
/* Navy panels: flat navy, no cyan glow. */
.pf-banner--brand { background: var(--navy) !important; }
.pf-sys, .ps-band { color: var(--on-navy) !important; background: var(--navy) !important; }

/* 20. Warm surfaces: every card, panel, list, field and dialog that v2 set to pure white becomes warm paper
   (generated from the parts' own selectors). The CV document (.cvx) and document previews keep white. */
.btn-outline { background-color: var(--paper); }
.btn-outline:hover { background-color: var(--paper); }
.top-search:hover { background-color: var(--paper); }
.top-search kbd { background-color: var(--paper); }
.cvm-sheet { background-color: var(--paper); }
.db-pill { background-color: var(--paper); }
.db-notice { background-color: var(--paper); }
.db-card { background-color: var(--paper); }
.db-tool:hover { background-color: var(--paper); }
.db-welcome { background-color: var(--paper); }
.db-path-ic { background-color: var(--paper); }
.ap-tabs { background-color: var(--paper); }
.ap-card { background-color: var(--paper); }
.ap-stat { background-color: var(--paper); }
.ap-empty { background-color: var(--paper); }
.ap-menu { background-color: var(--paper); }
.ap-chip { background-color: var(--paper); }
.ap-input { background-color: var(--paper); }
.ap-textarea { background-color: var(--paper); }
.ap-select { background-color: var(--paper); }
.tool-idle { background-color: var(--paper); }
.tool-working { background-color: var(--paper); }
.btn.ad-btn-danger-o { background-color: var(--paper); }
.ad-push { background-color: var(--paper); }
.ad-minis { background-color: var(--paper); }
.ad-tip { background-color: var(--paper); }
.ad-sel { background-color: var(--paper); }
.ad-mini-btn:hover { background-color: var(--paper); }
.ad-page { background-color: var(--paper); }
.ad-flag { background-color: var(--paper); }
.ad-dialog { background-color: var(--paper); }
.ad-dlg-from { background-color: var(--paper); }
.an-tip { background-color: var(--paper); }
.pk-pick { background-color: var(--paper); }
.co-card { background-color: var(--paper); }
.co-save { background-color: var(--paper); }
.co-start { background-color: var(--paper); }
.co-group { background-color: var(--paper); }
.cvp-tool { background-color: var(--paper); }
.ch-depth-body { background-color: var(--paper); }
.ch-chat { background-color: var(--paper); }
.ch-tool { background-color: var(--paper); }
.ch-edit { background-color: var(--paper); }
.ch-msg--me .ch-edit:hover { background-color: var(--paper); }
.ch-compose { background-color: var(--paper); }
.ch-rec-cancel { background-color: var(--paper); }
.ch-editor { background-color: var(--paper); }
.ds-compose { background-color: var(--paper); }
.ds-bar .ap-seg { background-color: var(--paper); }
.ds-post { background-color: var(--paper); }
.ds-picker { background-color: var(--paper); }
.ds-tag:hover { background-color: var(--paper); }
.ec-rich { background-color: var(--paper); }
.ec-fmt:hover { background-color: var(--paper); }
.ec-tool:hover { background-color: var(--paper); }
.ec-add { background-color: var(--paper); }
.ec-suggest { background-color: var(--paper); }
.ec-bar { background-color: var(--paper); }
.ec-toc-link:hover { background-color: var(--paper); }
.ec-toc-n { background-color: var(--paper); }
.fr-alt-ic { background-color: var(--paper); }
.jd-mini-ic { background-color: var(--paper); }
.jd-tile.is-open { background-color: var(--paper); }
.jd-tile-ic { background-color: var(--paper); }
.jd-more-box { background-color: var(--paper); }
.jd-q { background-color: var(--paper); }
.jb-search { background-color: var(--paper); }
.jb-filter-btn:hover { background-color: var(--paper); }
.jb-filter-btn[aria-expanded="true"] { background-color: var(--paper); }
.jb-chip { background-color: var(--paper); }
.jb-filters .ap-chip:not([aria-pressed="true"]) { background-color: var(--paper); }
.jb-job { background-color: var(--paper); }
.jb-save:hover { background-color: var(--paper); }
.jb-pg { background-color: var(--paper); }
.jb-ss { background-color: var(--paper); }
.jb-dialog { background-color: var(--paper); }
.lb-seg { background-color: var(--paper); }
.lb-item.is-me .lb-bar { background-color: var(--paper); }
.mc-new:hover { background-color: var(--paper); }
.mc-card { background-color: var(--paper); }
.mc-tag { background-color: var(--paper); }
.mc-create { background-color: var(--paper); }
.mc-method .tool-cost { background-color: var(--paper); }
.mc-empty { background-color: var(--paper); }
.mc-back { background-color: var(--paper); }
.mc-dialog { background-color: var(--paper); }
.ps-card { background-color: var(--paper); }
.ps-panel .ap-input { background-color: var(--paper); }
.ps-panel .ap-textarea { background-color: var(--paper); }
.ps-prompt { background-color: var(--paper); }
.ps-drop { background-color: var(--paper); }
.ps-drop.is-full:hover { background-color: var(--paper); }
.ps-thumb-media { background-color: var(--paper); }
.ps-mini { background-color: var(--paper); }
.ps-result .ps-facts li { background-color: var(--paper); }
.ps-result-score { background-color: var(--paper); }
.ps-react { background-color: var(--paper); }
.ps-dialog { background-color: var(--paper); }
.pf-hero { background-color: var(--paper); }
.pf-banner-btn:hover { background-color: var(--paper); }
.pf-confirm-ic { background-color: var(--paper); }
.pf-stat { background-color: var(--paper); }
.pf-vbar { background-color: var(--paper); }
.pf-badge { background-color: var(--paper); }
.pf .pf-sys-badge { background-color: var(--paper); }
.pf-link-ic { background-color: var(--paper); }
.rq-card { background-color: var(--paper); }
.rv-note { background-color: var(--paper); }
.rv-vote { background-color: var(--paper); }
.rv-done { background-color: var(--paper); }
.rv-share-preview { background-color: var(--paper); }
.st-note-ic { background-color: var(--paper); }
.st-tip { background-color: var(--paper); }
.st-empty { background-color: var(--paper); }
.tl-change-select { background-color: var(--paper); }
.tl-style-body { background-color: var(--paper); }
.tl-coach-block--plain { background-color: var(--paper); }
.tl-finish { background-color: var(--paper); }
.tl-pick { background-color: var(--paper); }
.cvm-up { background-color: var(--paper); }
.cvm-up-opt { background-color: var(--paper); }
.cvm-up-nudge { background-color: var(--paper); }
.up-steps li { background-color: var(--paper); }
.up-panel { background-color: var(--paper); }
.up-item .ap-input { background-color: var(--paper); }
.up-item .ap-textarea { background-color: var(--paper); }
.up-item-tools .ap-icon-btn:hover { background-color: var(--paper); }
.up-add { background-color: var(--paper); }
.up-tags { background-color: var(--paper); }
.up-tag button:hover { background-color: var(--paper); }
.up-sug { background-color: var(--paper); }
.up-file { background-color: var(--paper); }
.up-how-steps li { background-color: var(--paper); }
.up-drop { background-color: var(--paper); }
.up-go { background-color: var(--paper); }
.wz-top { background-color: var(--paper); }
.wz-dot { background-color: var(--paper); }
.wz-card { background-color: var(--paper); }
.wz-tip-ic { background-color: var(--paper); }
.wz-entry .ap-chip { background-color: var(--paper); }
.wz-entry .ap-icon-btn:hover { background-color: var(--paper); }
.wz-tag button:hover { background-color: var(--paper); }
.wz-sum-ic { background-color: var(--paper); }
.wz-resume { background-color: var(--paper); }
.btn-outline { background-color: transparent !important; }
/* Cards that carry a warm-listed class AND a coloured modifier keep the modifier's colour (higher specificity). */
.db-card.db-review, .ap-card.ap-card--navy { background-color: var(--navy); background-image: none; }
.ap-card.cvp-welcome { background-color: #FFF0C2; }
.ap-card.cvp-nudge { background-color: var(--yellow-soft); }
.cvm-up-opt.cvm-up-opt--pass { background-color: var(--navy); }
.db-pill.db-pill--badge { background-color: var(--mint); }
.db-pill.db-pill--pro { background-color: var(--sun); }
.lb-seg.ap-seg { background-color: var(--mist); }
.mc-tag.mc-tag--variant { background-color: var(--channel-soft); }
.tl-coach-block.tl-coach-block--plain { background-color: var(--cyan-soft); }
.tool-working.cvp-working { background-color: var(--mist); }
/* Pure-white inline backgrounds on pages not rebuilt yet, outside any CV design. */
:where([style*="background:white" i], [style*="background: white" i], [style*="background:#fff;" i], [style*="background: #fff;" i], [style*="background:#FFFFFF" i], [style*="background: #FFFFFF" i]):not(.cv-template *, .tpl-thumb *, #exCvContainer *, #cvVerPreview *, #cvPreviewArea *, #wizPreview *, .cvx *, .cvx) { background-color: var(--paper) !important; }

/* 20b. Corner badges: self-contained tilted stickers fully inside their card, never on the edge. */
.cvm-sticker { top: 14px; right: 14px; padding: 6px 12px 4px; box-shadow: 0 4px 10px rgba(30, 42, 90, .14), inset 0 0 0 1.5px rgba(30, 42, 90, .1); transform: rotate(4deg); }
:is(.cvp-welcome, .ch-depth, .ch-create, .cvp-nudge, .cvp-cta, .pf-sys, .db-review, .db-path, .mc-thumb, .ds-post, .ps-card, .ps-article) .cvm-sticker { top: 14px !important; right: 14px !important; left: auto !important; }
.wz-example .cvm-sticker { top: 12px !important; right: 12px !important; left: auto !important; }
.ds-pin { position: absolute; }
.ds-post, .ps-card, .ps-article { position: relative; }
:is(.ds-post, .ds-card, .ps-card, .ps-article, .jb-job, .jb-search, .lb-board, .lb-me, .pf-badge, .co-group, .wz-card, .wz-resume)::before { display: none !important; }
.db-path, .cvp-welcome { padding-top: 30px; }

/* 21. The CV document (UI.cvDoc .cvx) keeps its own look ======================================== */
/* Its frame and name header follow the v3 cards (owner: "the blue box needs to be rounded"): flat v3 navy,
   no indigo gradient, rounded with the frame. The CV content below the header is untouched. */
.cvx { border-radius: 20px; box-shadow: 0 18px 40px rgba(30, 42, 90, .1), 0 0 0 1px rgba(30, 42, 90, .06); }
.cvx-head { color: #fff; background: #1E2A5A; border-radius: 20px 20px 0 0; }
.cvx-head .cvx-role { color: #FFC93C; }
.cvx-head .cvx-sub { color: #D9E1F2; }
.wz-paper .cvx { border-radius: 16px; }
.wz-paper .cvx-head { border-radius: 16px 16px 0 0; }
.cvx--accent .cvx-head { border-top: 0 !important; box-shadow: none; } /* the old accent strip peeked above the rounded header */

/* It renders the user's CV, so it is not restyled beyond its frame: pin the tokens it reads to v2. */
.cvx { --navy: #191d3b; --indigo: #27349f; --yellow: #f5ff38; --yellow-soft: #fbffc9; --mist: #f2f3f8; --line: #e3e5f1; --muted: #5d6180; --text: #2b2f4c;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
.cvx h1, .cvx h2, .cvx h3 { font-family: inherit; }

/* 22. Side columns that grew past their track (v2 bug, long share URL) ============================== */
.ap, .ap-aside, .cvp-main, .cvp-aside, .cvp-scores, .cvp-share, #anBody { grid-template-columns: minmax(0, 1fr); }
.cvp-aside, .ap-aside { min-width: 0; }

/* 23. app.css's legacy recolour layer, finished in the v3 palette ===================================== */
:where([style*="background:#E8F1FB" i], [style*="background: #E8F1FB" i]):not(.cv-template *, .tpl-thumb *) { background-color: var(--sky-l) !important; }
:where([style*="background:rgba(11,102,195" i], [style*="background: rgba(11,102,195" i]):not(.cv-template *, .tpl-thumb *, #cvPreviewArea *) { background-color: var(--sky-l) !important; }
:where([style*="background:#084E96" i]):not(.cv-template *, .tpl-thumb *) { background-color: #16204A !important; }
/* Their page titles that are h2s (font-size 1.2-1.6rem, weight 700, set inline). */
#app :is(h2[style*="font-size:1.2rem; font-weight:700"], h2[style*="font-size:1.3rem; font-weight:700"], h2[style*="font-size:1.4rem; font-weight:700"],
        h2[style*="font-size:1.5rem; font-weight:700"], h2[style*="font-size:1.6rem; font-weight:700"]):not(.cv-template h2, .tpl-thumb h2, #exCvContainer h2, #cvVerPreview h2, #cvPreviewArea h2, #wizPreview h2, .cvx h2) {
  font-family: var(--v-display) !important; font-size: clamp(36px, 3.4vw, 48px) !important; font-weight: 400 !important; line-height: .95 !important;
  letter-spacing: .01em !important; text-transform: uppercase; color: var(--navy) !important;
}

/* 24. Danger and "low" tints: warm peach instead of pale pink (no pink in v3) ==================== */
.ds-tone--support, .ps-tone--support { --tone: var(--tang-t); --tone-soft: #FFD9BF; }
.jb-match--low { color: var(--tang-t); background: #FFD9BF; }
:root { --ad-danger-soft: #FCE3D6; --st-down-soft: #FCE3D6; }
.ec-rm:hover, .jb-ss-actions .ap-icon-btn:hover, .ps-c-act--danger:hover, .tl-del:hover, .ch-cost-out, .tl-cost-out, .fr-saving--error .fr-ic,
.mc-dialog-ic--danger, .tool-cost.jd-cost-out, .jd-fail, .ap-error, .co-confirm, .cvp-confirm, .ps-confirm, .ds-confirm, .up-confirm, .tl-confirm, .ch-rec { background-color: #FCE3D6; }
.pf-confirm-in { background: #FCE3D6; border-color: #F2C3A8; }
.rv-vote--low[aria-checked="true"] { background: #FCE3D6; border-color: var(--tang); }
.form-status, .ap-error { color: #8C1D18; }
.form-status { background: #FCE3D6; }
/* Cards with a corner sticker get a header row of their own, so the sticker never covers a link or button. */
:is(.db-card, .ap-card, .ds-card, .db-path, .ps-card, .ps-article, .lb-board, .lb-me, .co-find, .co-card):has(> .cvm-sticker) { padding-top: 56px !important; }
.co-find { border: 0; border-radius: 26px; }
.co-card { border-top: 1px solid var(--line) !important; }
/* Old pages that use the page-hero pattern (job tracker, portfolio, ...). */
#app .page-hero-title { display: flex; align-items: center; gap: 10px; font-family: var(--v-display) !important; font-size: clamp(40px, 4vw, 58px) !important; font-weight: 400 !important; line-height: .92 !important; letter-spacing: .01em !important; text-transform: uppercase; color: var(--navy) !important; }

.wz-example { padding-top: 46px; border: 0; background: #FFF0C2; border-radius: 20px; }
.wz-example .cvm-sticker { top: 12px !important; left: 16px !important; right: auto !important; }

/* 25. The account menu (avatar, top right). index.php builds it with inline styles; app-v3.js adds the hooks. */
#avatarMenu.v3-um { min-width: 290px !important; margin-top: 12px !important; padding: 0 0 8px; overflow: visible !important; background: var(--paper) !important; border: 0 !important;
  border-radius: 24px !important; box-shadow: 0 24px 54px rgba(30, 42, 90, .22), 0 0 0 1px rgba(30, 42, 90, .07) !important; animation: v3-um-in .18s cubic-bezier(.2, .8, .2, 1); }
#avatarMenu.v3-um::before { content: ''; position: absolute; top: -7px; right: 14px; width: 16px; height: 16px; background: var(--navy); border-radius: 4px 0 0 0; transform: rotate(45deg); }
@keyframes v3-um-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.v3-um .v3-um-head { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; margin: 0 0 6px; padding: 16px 16px 14px !important;
  color: var(--cream); background: var(--navy); border: 0 !important; border-radius: 24px 24px 18px 18px; }
.v3-um .v3-um-av { grid-row: span 2; display: grid; place-items: center; width: 46px; height: 46px; font-family: var(--v-display); font-size: 26px; line-height: 1; color: var(--navy); background: var(--sun); border-radius: 50% 46% 52% 48%; object-fit: cover; }
.v3-um .v3-um-head > div:first-of-type { font-family: var(--v-display) !important; font-size: 26px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: .02em; text-transform: uppercase; color: var(--cream) !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.v3-um .v3-um-head > div:nth-of-type(2) { display: none; }
.v3-um .v3-um-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.v3-um .v3-um-chip { padding: 2px 9px 1px; font-size: 12px; font-weight: 900; letter-spacing: .02em; border-radius: 999px; }
.v3-um .v3-um-chip--rep { color: var(--navy); background: var(--mint); }
.v3-um .v3-um-chip--free { color: var(--navy); background: #F3E3BF; }
.v3-um .v3-um-chip--pro { color: var(--navy); background: var(--sun); }
.v3-um .v3-um-label { margin: 10px 18px 2px; font-family: var(--v-slab); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--tang-t); }
.v3-um .v3-um-rule { display: none; }
.v3-um .v3-um-row { position: relative; min-height: 44px; margin: 1px 8px; padding: 8px 12px !important; gap: 12px !important; font-family: var(--v-body); font-size: 15px !important; font-weight: 700;
  color: var(--navy) !important; background: none !important; border-radius: 14px; text-decoration: none; transition: background-color .15s ease, padding .15s ease; }
.v3-um .v3-um-row svg { flex: none; box-sizing: content-box; width: 15px; height: 15px; padding: 7px; color: var(--navy); background: var(--ic, var(--mint)); border-radius: 50%; }
.v3-um .v3-um-row--g0 { --ic: var(--mint); }
.v3-um .v3-um-row--g1 { --ic: var(--sky); }
.v3-um .v3-um-row:hover, .v3-um .v3-um-row:focus-visible { padding-left: 16px !important; background: #FFE7A3 !important; outline: none; }
.v3-um .v3-um-row:focus-visible { box-shadow: inset 0 0 0 2px var(--navy); }
.v3-um .v3-um-row.is-current { background: var(--cream) !important; }
.v3-um .v3-um-row.is-current::after { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; background: var(--sun-d); border-radius: 4px; }
.v3-um .v3-um-row--up { margin-top: 4px; --ic: var(--sun); background: #FFF0C2 !important; }
.v3-um .v3-um-row--admin { --ic: var(--sun); color: var(--cream) !important; background: var(--navy) !important; }
.v3-um .v3-um-row--admin svg { color: var(--navy); }
.v3-um .v3-um-row--admin:hover, .v3-um .v3-um-row--admin:focus-visible { color: var(--navy) !important; }
.v3-um .v3-um-row--out { --ic: #FFD9BF; color: var(--muted) !important; }
.v3-um .v3-um-row--out svg { color: var(--tang-t); }
#avatarMenuBtn:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 50%; }
@media (max-width: 760px) {
  #avatarMenu.v3-um { position: fixed !important; left: 8px !important; right: 8px !important; top: calc(var(--header-h) + 6px) !important; min-width: 0 !important; max-height: calc(100vh - var(--header-h) - 16px); overflow-y: auto !important; }
  #avatarMenu.v3-um::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { #avatarMenu.v3-um { animation: none; } .v3-um .v3-um-row { transition: none; } }

/* Card "..." menus and the explore menu follow the same look. */
.ap-menu { padding: 8px; border-radius: 22px; box-shadow: 0 24px 54px rgba(30, 42, 90, .2), 0 0 0 1px rgba(30, 42, 90, .07); }
.ap-menu button { min-height: 42px; font-weight: 700; }
.ap-menu button:hover, .ap-menu button:focus-visible { background: #FFE7A3; outline: none; }
.ap-menu hr { border-top: 2px dashed var(--line); }
#exploreDropMenu { background: var(--paper) !important; border: 0 !important; border-radius: 22px !important; box-shadow: 0 24px 54px rgba(30, 42, 90, .2), 0 0 0 1px rgba(30, 42, 90, .07) !important; padding: 8px; }
#exploreDropMenu a { border-radius: 14px; font-weight: 700; color: var(--navy) !important; }
#exploreDropMenu a:hover { background: #FFE7A3 !important; }
/* The avatar button in the top bar matches the sidebar's member circle. */
#avatarMenuBtn .nav-avatar { color: var(--navy) !important; background: var(--mint) !important; border-radius: 50% 46% 52% 48%; font-weight: 900; }

/* 26. Community feed: the Pinned sticker sits beside the author row (no extra band above it). */
.ds-post .ds-pin { top: 22px !important; right: 18px !important; }
.ds-post--pinned .ds-post-head { padding-right: 92px; }
@media (max-width: 760px) { .ds-post .ds-pin { top: 20px !important; right: 12px !important; } .ds-post--pinned .ds-post-head { padding-right: 84px; } }

/* 27. Notes above the CV (owner preview, privacy notices) get room and the v3 notice look. */
.cvp-doc > :not(.cvx), .rv-doc > :not(.cvx):not(.rv-tip) { margin: 0 0 18px !important; }
.cvp-banner, .cvp-doc > p, .cvp-doc > div:not(.cvx) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 18px; font-size: 15px; font-weight: 700; color: var(--navy); background: #FFE9DA; border-radius: 18px; }
.cvp-banner { margin-bottom: 4px; }
.cvp-banner svg, .cvp-doc > p > svg, .cvp-doc > div:not(.cvx) > svg { box-sizing: content-box; flex: none; padding: 7px; color: var(--tang-t) !important; background: var(--paper); border-radius: 50%; }
.cvp-banner--warn { background: #FFF0C2; }
.cvp-banner a { font-weight: 800; color: var(--navy); }
.cvx-head .cvx-sub svg { color: var(--sun); vertical-align: -2px; }

/* 28. Review notes on the CV (/review-cv): v3 sunshine states, clearly distinct, always readable. */
.cvx .is-annotatable { border: 2px dashed transparent; border-radius: 14px; }
.cvx .is-annotatable:hover { background: #FFF6DC; border-color: #F2C76A; }
.cvx .is-annotatable:focus-visible { background: #FFF6DC; border-color: #F2C76A; outline: 3px solid var(--navy); outline-offset: 2px; }
.cvx .is-annotatable.has-note { background: #FFF1C7; border: 2px solid #FFC93C; }
.cvx .is-annotatable::after { top: -11px; right: 12px; padding: 3px 10px 2px; font-size: 11.5px; font-weight: 900; color: #1E2A5A; background: #FFC93C; border-radius: 999px; box-shadow: 0 3px 8px rgba(30, 42, 90, .15); transform: rotate(3deg); }
.cvx .is-annotatable.has-note::after { content: 'Note added'; }
.rv-note { margin: 10px -12px 14px; padding: 14px 14px 12px 18px; background: var(--paper); border: 2px solid #EADDBB; border-left: 6px solid var(--sun); border-radius: 16px; box-shadow: 0 10px 24px rgba(30, 42, 90, .1); }
.rv-note-head { font-weight: 700; color: var(--navy); }
.rv-note-head svg { color: var(--tang-t); }
.rv-note-head b { color: var(--navy); }
.rv-note .ap-textarea { background: #fff; border: 2px solid #E3D7B8; border-radius: 14px; }
.rv-note .ap-textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(30, 42, 90, .14); }
.rv-tip svg { color: var(--tang-t); }

/* 29. Saved jobs that have closed on Reed (app-jobs): calm warm card, peach chip. */
.jb-job.is-closed { background: #F7EEDA !important; border: 2px dashed #E3D7B8 !important; box-shadow: none !important; }
.jb-job.is-closed:hover { border-color: #D6C59A !important; }
.jb-job.is-closed .jb-logo, .jb-job.is-closed:hover .jb-logo { color: var(--muted); background: var(--paper); }
.jb-job.is-closed .jb-job-title a { color: var(--muted); }
.jb-fact--closed { color: var(--tang-t); }

/* 30. Member avatars everywhere: a paper gap ring and a sunshine ring, soft navy shadow. Sizes unchanged. */
:is(.nav-avatar, .side-av, .db-av:not(.db-av--bell), .ap-av, .post-author-avatar, .comment-avatar, .profile-avatar, .follow-avatar, .ps-c-av, .avatar-stack-item, .app-side-avatar, .v3-um-av, .avatar) {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px #FFC93C, 0 3px 8px rgba(30, 42, 90, .18) !important;
}
.pf-hero .ap-av, .pf-av-wrap .ap-av { box-shadow: 0 0 0 4px var(--paper), 0 0 0 8px #FFC93C, 0 8px 18px rgba(30, 42, 90, .2) !important; }
#avatarMenuBtn .nav-avatar { transition: transform .18s cubic-bezier(.3, 1.4, .5, 1); }
#avatarMenuBtn:hover .nav-avatar { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { #avatarMenuBtn .nav-avatar { transition: none; } }

/* 31. Job cards: the "Closing soon" / "New today" sticker gets its own row above the title, clear of Save. */
.jb-job:has(> .cvm-sticker) { padding-top: 54px !important; }
.jb-job > .jb-sticker { top: 14px !important; right: auto !important; left: 18px !important; transform: rotate(-3deg); }
/* Closed jobs (jobs builder): palette chips and notes. */
.jb-closed-chip, .jd-closed-chip { color: var(--tang-t) !important; background: #FFD9BF !important; }
.jb-closed-note { color: var(--text); background: #F7EEDA; border-radius: 16px; }
.jb-hide-closed { background: var(--paper); border-color: #E3D7B8; }
.jb-hide-closed:hover { border-color: var(--navy); }
.jd-gone { background: #F7EEDA; border-radius: 18px; }

/* 32. Empty and error states: one smooth solid blob behind the icon. No square, no tilt, no red. */
.ap-empty-ic, .tool-idle .ap-empty-ic, .co-start--search .ap-empty-ic { --blob: var(--sun); background: none !important; border-radius: 0 !important; transform: none !important; box-shadow: none !important; }
.ap-empty-ic::before { background: var(--blob) !important; }
.tl .tool-idle .tl-ic--cyan, .co-start--search .ap-empty-ic { --blob: var(--mint); }
.tl .tool-idle .tl-ic--channel { --blob: var(--sky); }
.tl .tool-idle .tl-ic--err, .ap-empty-ic.tl-ic--err { --blob: #FFD9BF; color: var(--sun) !important; }
.ap-empty-ic.tl-ic--err svg { box-sizing: content-box; padding: 9px; color: var(--sun); background: var(--navy); border-radius: 50%; }
.fr-saving--error .fr-ic { color: var(--sun); }
.fr-saving--error .fr-ic::before { background: #FFD9BF; }
.fr-saving--error .fr-ic svg { box-sizing: content-box; padding: 7px; background: var(--navy); border-radius: 50%; }
.tool-idle .ap-empty-ic { width: 96px !important; height: 96px !important; }

/* Application pack: the "+25%" sticker sat on top of the next-step button's label; lift it onto the panel's top edge. */
.pk-next .pk-next-sticker { top: -13px !important; right: 22px !important; left: auto !important; }

/* Dashboard portfolio card (v3): a mint card, display heading and a paper "search result". */
.db-pf { background: var(--mint); box-shadow: var(--shadow); }
.db-pf .db-label { color: var(--teal-t); }
.db-pf h2 { font-family: var(--v-display); font-size: 40px; font-weight: 400; line-height: .9; letter-spacing: .01em; text-transform: uppercase; color: var(--navy); -webkit-text-stroke: .02em currentColor; }
.db-pf-text { color: var(--text); }
.db-pf-ticks { font-weight: 700; }
.db-pf-ticks svg { color: var(--teal); }
.db-pf-search, .db-pf-result { background: var(--paper); box-shadow: 0 10px 24px rgba(30, 42, 90, .12); }
.db-pf-url { color: var(--teal-t); }
.db-pf-result b { color: var(--navy); }
.db-pf-result i { background: var(--line); }
.db-pf-chip { color: var(--navy); background: var(--sun); }
.db-pf .cvm-sticker { top: -12px !important; right: 20px !important; left: auto !important; }
.pf-paid-note { background: #FFF0C2; border-radius: 18px; }
#app .db-pf h2 { font-size: 40px !important; }
@media (max-width: 640px) { #app .db-pf h2 { font-size: 34px !important; } }

/* Letter avatars: 12 palette colours, picked from the person's name (UI.avatarTone in app.js), so a
   member keeps the same colour everywhere. Photos are unaffected. */
:is(.ap-av, .db-av, .side-av, .v3-um-av).av-t0 { color: var(--cream); background: var(--navy); }
:is(.ap-av, .db-av, .side-av, .v3-um-av).av-t1 { color: var(--navy); background: var(--mint); }
:is(.ap-av, .db-av, .side-av, .v3-um-av).av-t2 { color: var(--navy); background: var(--sun); }
:is(.ap-av, .db-av, .side-av, .v3-um-av).av-t3 { color: var(--navy); background: var(--sky); }
:is(.ap-av, .db-av, .side-av, .v3-um-av).av-t4 { color: var(--navy); background: #FFD3BA; }
:is(.ap-av, .db-av, .side-av, .v3-um-av).av-t5 { color: var(--navy); background: var(--tang); }
:is(.ap-av, .db-av, .side-av, .v3-um-av).av-t6 { color: var(--cream); background: var(--teal-t); }
:is(.ap-av, .db-av, .side-av, .v3-um-av).av-t7 { color: var(--navy); background: #DCD6F7; }
:is(.ap-av, .db-av, .side-av, .v3-um-av).av-t8 { color: var(--navy); background: #DCEFB8; }
:is(.ap-av, .db-av, .side-av, .v3-um-av).av-t9 { color: #fff; background: #2F6FB5; }
:is(.ap-av, .db-av, .side-av, .v3-um-av).av-t10 { color: var(--navy); background: #F2DDB3; }
:is(.ap-av, .db-av, .side-av, .v3-um-av).av-t11 { color: var(--cream); background: var(--tang-t); }

/* 33. Job matches by email card on /jobs (app-jobs .jb-mail): a sunshine card with the blob icon, like the
   upgrade dialog; the "Job emails: on" line stays a quiet warm note. Colours come from the remapped tokens. */
.jb-mail { border-radius: 22px; }
.jb-mail-ic { position: relative; isolation: isolate; width: 46px; height: 46px; background: none; border-radius: 0; transform: none; }
.jb-mail-ic::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--sun); -webkit-mask: var(--v-blob-a) center / 100% 100% no-repeat; mask: var(--v-blob-a) center / 100% 100% no-repeat; }
.jb-mail-text h2 { font-weight: 900; }
.jb-mail--on { border-radius: 16px; }

/* Comments: the ring belongs on the round avatar inside .ps-c-av, not on the tall link around it (it drew yellow boxes). */
.ps-c-av.ps-c-av.ps-c-av { box-shadow: none !important; } /* outranks the :is() avatar-ring rule (0,2,0 via .db-av:not(...)) */

/* Logged-out visitors on app pages (posts, CVs, community): the same header as the public v3 pages
   (includes/site/v3/layout.php + v3.css .site-header). index.php adds body.cvm-guest. Phones keep the menu. */
@media (min-width: 769px) {
  body.cvm-guest .header .header-inner { max-width: 1200px; min-height: 84px; margin: 0 auto; padding: 0 24px; gap: 24px; }
  body.cvm-guest .header .header-inner > div:last-child { flex: 1; }
  body.cvm-guest .header #mainNav { display: flex; flex: 1; align-items: center; gap: 4px; margin-left: 16px; }
  body.cvm-guest .header .logo { padding: 12px 20px 7px; transform: rotate(-4deg); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
  body.cvm-guest .header .logo:hover { transform: rotate(2deg) scale(1.04); }
  body.cvm-guest .header .logo, body.cvm-guest .header .logo .brand-name, body.cvm-guest .header .logo .brand-mojo { font-size: 34px; -webkit-text-stroke: .02em currentColor; }
  .header .nav-link--site { position: relative; z-index: 0; display: block; padding: 10px 12px; font-size: 14.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; color: var(--text); background: none !important; border-radius: 0; }
  .header .nav-link--site::after { content: ''; position: absolute; z-index: -1; left: 8px; right: 8px; bottom: 6px; height: 9px; background: var(--sun); -webkit-mask: var(--v-stroke) center / 100% 100% no-repeat; mask: var(--v-stroke) center / 100% 100% no-repeat; transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
  .header .nav-link--site:hover { color: var(--navy); }
  .header .nav-link--site:hover::after { transform: scaleX(1); }
  .header .nav-guest-actions { display: flex; align-items: center; gap: 20px; margin-left: auto; }
  .header .nav-signin { padding: 0; font-size: 15px; font-weight: 800; text-decoration: none; color: var(--text); background: none !important; }
  .header .nav-signin:hover { color: var(--navy); text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 3px; }
  .header .nav-check { min-height: 46px; padding: .5em 1.1em .36em; font-size: 22px; }
}
@media (max-width: 768px) {
  .header .nav-guest-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 16px 12px; }
  .header .nav-check { justify-content: center; }
}
body.cvm-guest .header { box-shadow: none !important; }
/* Phones: the guest menu button looks like the public pages' navy "MENU" brush button. */
@media (max-width: 768px) {
  body.cvm-guest .header .hamburger { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; width: auto; height: auto; margin-left: auto; padding: 10px 16px 8px; font-family: var(--v-display); font-size: 24px; line-height: 1; text-transform: uppercase; color: var(--cream); background: none; border: 0; }
  body.cvm-guest .header .hamburger::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--navy); -webkit-mask: var(--v-swatch-1) center / 100% 100% no-repeat; mask: var(--v-swatch-1) center / 100% 100% no-repeat; }
  body.cvm-guest .header .hamburger::after { content: 'Menu'; order: -1; }
  body.cvm-guest .header .hamburger svg { width: 22px; height: 22px; }
  body.cvm-guest .header .logo { padding: 10px 16px 6px; transform: rotate(-4deg); }
  body.cvm-guest .header .logo, body.cvm-guest .header .logo .brand-name, body.cvm-guest .header .logo .brand-mojo { font-size: 30px; }
}

/* Long page titles (a CV's target role written as a sentence): smaller, at most two lines; long breadcrumbs end in "…". */
#app .ap-title.ap-title--long { font-size: clamp(30px, 3.4vw, 46px) !important; line-height: 1 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ap-crumbs li:last-child { max-width: min(46ch, 100%); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Jobs page: "Jobs from Reed.co.uk" attribution with Reed's logo. */
.jb-reed { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; padding: 4px 10px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); vertical-align: middle; background: #fff; border-radius: 999px; box-shadow: 0 2px 8px rgba(30, 42, 90, .08); }
.jb-reed img { display: block; width: 80px; height: auto; }

/* Mojo's avatar (CV interview chat) and the CV Mojo Team profile badge: the yellow CV Mojo icon,
   the same mark as the favicon, instead of the old navy "CV" square (owner, 2026-10-25). */
/* Team profile badge: the CV Mojo icon. */
.brand-badge.pf-sys-badge { background: url('/assets/site/v3/fav/icon-192.png') center / 100% 100% no-repeat !important; color: transparent !important; font-size: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.brand-badge.pf-sys-badge::after { display: none !important; }
/* Mojo in the CV interview chat: a person avatar on a round sun disc (owner, 2026-10-25). */
.brand-badge.ch-mark { overflow: hidden; background: var(--sun, #FFC93C) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='9' r='4.3' fill='%231F2A55'/%3E%3Cpath d='M3.2 23.5c.5-5.2 4.3-8.6 8.8-8.6s8.3 3.4 8.8 8.6z' fill='%231F2A55'/%3E%3C/svg%3E") center bottom / 82% no-repeat !important; color: transparent !important; font-size: 0 !important; border-radius: 50% !important; box-shadow: 0 0 0 2px var(--paper, #FFFDF7), 0 0 0 3.5px var(--sun, #FFC93C) !important; }
.brand-badge.ch-mark::after { display: none !important; }

/* Your chosen design and "Your job-ready pack" (2026-10-26; app.js): paper card, slab kicker, display title */
.jrp { background: var(--paper); border: 0; border-radius: 26px; box-shadow: var(--shadow); }
.jrp-kicker, .dpk-kicker { font-family: var(--v-slab); font-size: 14px; font-weight: 400; letter-spacing: .04em; color: var(--tang-t); }
#app .jrp-title, #app .dpk-title { font-family: var(--v-display); font-size: 34px !important; font-weight: 400; line-height: .95; letter-spacing: .01em; text-transform: uppercase; color: var(--navy); -webkit-text-stroke: .02em currentColor; }
.jrp-thumb, .dpk-thumb { border-radius: 8px; box-shadow: 0 10px 22px rgba(30, 42, 90, .16), 0 0 0 1px rgba(30, 42, 90, .08); }
.jrp-steps, .jrp-step { border-color: var(--line); }
.jrp-check { border-color: #D9CFB3; }
.jrp-step.is-now .jrp-check { background: var(--sun); border-color: var(--sun); }
.jrp-step.is-done .jrp-check { background: var(--teal); border-color: var(--teal); }
.jrp-step-t b { font-weight: 900; }
.jrp-way { background: var(--cream); border: 0; border-radius: 18px; box-shadow: inset 0 0 0 1.5px var(--line); }
.jrp-way:hover { box-shadow: inset 0 0 0 2px var(--navy); }
.jrp-way:focus-visible { box-shadow: inset 0 0 0 2px var(--navy), var(--focus-ring); }
.jrp-way--main { background: #FFF0C2; }
.jrp-way b { font-weight: 900; }
.jrp-show { background: var(--paper); border: 0; box-shadow: var(--shadow-sm); }
.jrp-show svg { color: var(--teal-t); }
.dpk { background: var(--sky); border-radius: 26px; } /* not the report card's yellow, which often sits below it */
@media (max-width: 760px) { #app .jrp-title, #app .dpk-title { font-size: 28px !important; } }

/* Small action buttons. Page styles shrink these to 13.5-14px (tool toolbars, confirm rows, job, course and
   upload footers), which is too small for the hand-lettered caps, so the caps kinds get 19px here
   (owner, 2026-10-26: "hard to read text"). Plain .btn buttons use the body font and keep their sizes. */
:is(.ap-toolbar .ap-actions, .tl-confirm, .tl-cached, .sgs, .ds-confirm, .mc-foot, .cvp-ref-foot, .cvp-confirm, .jb-filters-foot, .jb-sub-head, .jb-res-head, .jb-ss-actions, .co-foot, .co-confirm, .ch-editor-actions, .ch-confirm-actions, .jd-ask-btns, .jd-out-head, .up-confirm, .up-attach-row, .ps-confirm, .ps-inline) :is(.btn-primary, .btn-outline, .btn-yellow, .btn-accent, .btn-danger, .btn-ghost-dark):not([style*="background"]),
:is(.btn.jd-ask-btn, .btn.tl-read, .btn.ad-btn-sm):is(.btn-primary, .btn-outline, .btn-yellow, .btn-accent, .btn-danger, .btn-ghost-dark):not([style*="background"]) { font-size: 19px; letter-spacing: .035em; }

/* Free use guard (2026-10-26): the "Confirm your email" panel (assets/site/app-upgrade.js CVC.freeHold) and the
   sidebar box while free uses wait for a confirmed email (app.js holdBoxHtml). */
.cvm-up-mail { font-weight: 700; color: var(--navy); background: var(--cream); border-radius: 16px; }
.cvm-up-mail svg { color: var(--teal-t); }
.cvm-up-status { font-weight: 800; color: var(--teal-t); }
.side-uses-dots i.is-held { background: transparent; box-shadow: inset 0 0 0 2px var(--mint); }
.side-uses-held { color: #DCE3F4; }
.side-uses-act { font-weight: 800; color: var(--mint); }
.side-uses-act:hover { color: var(--cream); }
.side-uses-act:focus-visible { outline-color: var(--sun); }

/* Free uses box in the sidebar: the tilted orange card the owner liked (the old .side-pro look: tang fill in the
   hand-drawn frame, -2deg, display-face heading), with navy text throughout (2026-10-26). */
.side-uses { position: relative; isolation: isolate; padding: 17px 19px 16px; color: var(--navy); background: none; border-radius: 0; box-shadow: none; transform: rotate(-2deg); transition: transform .25s cubic-bezier(.3, 1.5, .5, 1); }
.side-uses::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--tang); -webkit-mask: var(--v-frame-a) center / 100% 100% no-repeat; mask: var(--v-frame-a) center / 100% 100% no-repeat; }
.side-uses:hover, .side-uses:focus-within { transform: rotate(0deg); }
.side-uses-top b { font-family: var(--v-display); font-size: 24px; font-weight: 400; line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--navy); -webkit-text-stroke: .02em currentColor; }
.side-uses-dots i { background: var(--navy); }
.side-uses-dots i.is-used { background: rgba(30, 42, 90, .22); }
.side-uses-dots i.is-held { background: transparent; box-shadow: inset 0 0 0 2px var(--navy); }
.side-uses-info, .side-uses-held { color: var(--navy); }
.side-uses-what, .side-uses-up, .side-uses-act { color: var(--navy); text-decoration-color: var(--navy); }
.side-uses-what:hover, .side-uses-up:hover, .side-uses-act:hover { color: var(--navy); text-decoration-color: var(--cream); }
.side-uses :focus-visible, .side-uses-act:focus-visible { outline-color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .side-uses { transition: none; } }

/* Charity & volunteering in the sidebar: pink with white text when it's the open page (owner's colour, 2026-10-27). */
.side-link[data-page="volunteering"].is-active, .side-link[data-page="volunteering"].is-active:hover { color: #FFFFFF; }
.side-link[data-page="volunteering"].is-active::before { background: #DF7387; }