/* Student CV Maker, in the Freddie Sparrow Limited look (freddiesparrow.co.uk):
   deep navy, one blue, hard black offset shadows, pill navigation.
   Fonts are served from this site, never a font CDN. SIL OFL 1.1, see
   /cv/fonts/OFL.txt. One deliberate dark theme, as on the company site. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:200 800;src:url(/cv/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-display:swap;font-weight:200 800;src:url(/cv/fonts/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-display:swap;font-weight:400 700;src:url(/cv/fonts/instrument-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-display:swap;font-weight:400 700;src:url(/cv/fonts/instrument-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-display:swap;font-weight:400 900;src:url(/cv/fonts/schibsted-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-display:swap;font-weight:400 900;src:url(/cv/fonts/schibsted-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root {
  --paper: #0A1F36; --deep: #06172A; --card: #0F2A48; --field: #0A1F36;
  --ink: #eef3f8; --ink2: #b4c3d4; --mute: #a9b8c9;
  --line: rgba(220,232,245,.18); --line2: rgba(220,232,245,.12); --fieldline: rgba(220,232,245,.45); --chip: rgba(220,232,245,.08);
  --blue: #2E90E5; --sky: #7cc0f5; --edge: rgba(46,144,229,.5);
  /* Status. Green only for "someone else confirmed this". */
  --green: #5fd3a0; --greenbg: rgba(95,211,160,.14); --greenfg: #8fe3bd;
  --rust: #ffb4a8; --rustbg: rgba(255,120,100,.14);
  --amberbg: rgba(240,190,90,.14); --amberfg: #f3cf85;
  --bluebg: rgba(46,144,229,.18);
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --label: 'Schibsted Grotesk', system-ui, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; margin: 0; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
a { color: var(--sky); } a:hover { color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }

.wrap { max-width: 1200px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 56px); }

/* The registration strip, the header and its pill nav, as on the company site */
.strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; padding: 10px 24px; background: var(--deep); border-bottom: 1px solid var(--line2); color: #c9d6e4; font: 500 12px/1.4 var(--label); letter-spacing: .06em; text-align: center; }
.strip .dot { color: var(--blue); }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-block: 24px; }
.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.logo img { display: block; border-radius: 11px; box-shadow: none; }
.logo b { display: block; font: 800 18px/1 var(--display); letter-spacing: -.02em; }
.logo small { display: block; margin-top: 5px; font: 600 10px/1.2 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.top nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 999px; }
.top nav .btn { border-color: transparent; background: none; color: #c9d6e4; box-shadow: none; min-height: 36px; padding: 0 14px; font-weight: 400; }
.top nav .btn:hover { background: rgba(220,232,245,.1); color: #fff; }
.top nav .btn.pri, .top nav .btn:last-child:not(.ghost) { background: var(--blue); color: var(--paper); font-weight: 600; }
.top nav .pill, .top nav .muted { padding: 0 8px; }

main { padding-block: 40px 72px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px;
  border: 1.5px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; font: 600 15px/1 var(--sans); text-decoration: none; }
.btn:hover { border-color: var(--sky); color: var(--ink); }
.btn.pri, .btn.go { background: var(--blue); border-color: var(--blue); color: var(--paper); box-shadow: none; }
.btn.pri:hover, .btn.go:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.ghost { border-color: transparent; }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: 14px; box-shadow: none; }
.btn.danger { border-color: rgba(255,180,168,.5); color: var(--rust); }
.btn:disabled { opacity: .6; cursor: default; }

.card { background: var(--card); border: 1px solid var(--edge); border-radius: 24px; padding: clamp(22px, 4vw, 32px); box-shadow: none; }
.card .card { box-shadow: none; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
label.row { flex-wrap: nowrap; }
.row input[type=checkbox] { width: auto; flex: none; }
.between { justify-content: space-between; }
.muted { color: var(--mute); font-size: 14px; }
.lbl { font: 600 11px/1.2 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--sky); }
.pill { display: inline-block; padding: 6px 12px; border-radius: 999px; font: 600 12px/1.2 var(--label); background: var(--chip); color: #c9d6e4; }
.p-ok { background: var(--greenbg); color: var(--greenfg); } .p-warn { background: var(--amberbg); color: var(--amberfg); }
.p-bad { background: var(--rustbg); color: var(--rust); } .p-info { background: var(--bluebg); color: var(--sky); }

.badge { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-radius: 16px; font: 700 17px/1.3 var(--display); letter-spacing: -.01em; }
.badge small { display: block; margin-top: 3px; font: 500 13px/1.4 var(--sans); letter-spacing: 0; }
.b-ok { background: var(--greenbg); color: var(--greenfg); } .b-warn { background: var(--amberbg); color: var(--amberfg); }
.b-bad { background: var(--rustbg); color: var(--rust); } .b-none { background: var(--chip); color: var(--ink2); }
.flag { display: flex; gap: 10px; font-size: 14px; padding: 12px 14px; border-radius: 12px; }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stat { background: var(--paper); border: 1px solid var(--line2); border-radius: 14px; padding: 14px; }
.stat b { display: block; font: 800 24px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.stat span { font-size: 13px; color: var(--ink2); }
.bar { height: 10px; border-radius: 5px; background: var(--chip); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--blue); }

.f { display: flex; flex-direction: column; gap: 8px; font: 600 13px/1.4 var(--sans); color: var(--ink2); }
.f input, .f select, .f textarea { padding: 14px 16px; border: 1.5px solid var(--fieldline); border-radius: 12px; background: var(--field); color: var(--ink); font: 400 16px/1.5 var(--sans); width: 100%; }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(46,144,229,.22); }
.f textarea { min-height: 140px; resize: vertical; }
/* Date of birth: three short boxes (day, month, year) instead of a calendar. */
fieldset.f { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.f legend { padding: 0; margin-bottom: 8px; font: 600 13px/1.4 var(--sans); color: var(--ink2); }
.dob-parts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.dob-parts label { display: flex; flex-direction: column; gap: 6px; font: 500 13px/1.4 var(--sans); color: var(--mute); }
.f .dob-parts input { width: 4.75em; padding: 14px 10px; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.f .dob-parts .yr input { width: 6.5em; }
.f .dob-parts input[aria-invalid="true"] { border-color: var(--rust); box-shadow: 0 0 0 4px rgba(255,120,100,.22); }
/* The browser's own placeholder grey is about 3.6:1 on these dark fields. */
input::placeholder, textarea::placeholder { color: #8fa1b5; opacity: 1; }
.hint { font: 400 13px/1.5 var(--sans); color: var(--mute); }
.err { font-size: 14px; color: var(--rust); min-height: 1em; margin: 0; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.full { grid-column: 1 / -1; }
.entry { border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: grid; gap: 14px; }

/* Landing */
.eyebrow { font: 600 12px/1 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--sky); }
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; padding-top: 24px; }
.hero h1 { font-size: clamp(52px, 8vw, 96px); line-height: .95; letter-spacing: -.045em; text-shadow: none; }
.hero h1 span { color: var(--blue); }
.hero p { font-size: 20px; line-height: 1.6; color: var(--ink2); max-width: 52ch; margin: 0; }
.facts { display: flex; flex-wrap: wrap; gap: 24px 56px; padding: 28px 0; margin-top: 64px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts div { display: flex; flex-direction: column; gap: 8px; flex: 1 1 200px; }
.facts b { font: 700 20px/1.2 var(--display); }
.section-head { display: flex; align-items: baseline; gap: 16px; padding-bottom: 20px; margin-top: 80px; border-bottom: 1px solid var(--line); }
.section-head .num { font: 600 12px/1 var(--label); color: var(--sky); }
.section-head .lbl { color: var(--mute); }
/* Common questions (cvseo): a short question and a direct answer, shown on the page and marked up for answer engines from this same text. */
.faq-item { padding: 22px 0; border-bottom: 1px solid var(--line); }
.faq-item h3 { font-size: 20px; line-height: 1.3; margin: 0 0 8px; }
.faq-item p { margin: 0; max-width: 72ch; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 32px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.steps > div { background: var(--paper); padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.steps .n { font: 800 48px/1 var(--display); color: transparent; -webkit-text-stroke: 1.5px var(--blue); }
.steps h3 { font-size: 26px; } .steps p { color: var(--ink2); margin: 0; }
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 32px; }
.prices .card { display: flex; flex-direction: column; gap: 12px; }
.prices h3 { font-size: 28px; }
.amt { font: 800 40px/1 var(--display); letter-spacing: -.03em; }

/* Editor */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 28px; padding: 6px; border: 1px solid var(--line); border-radius: 999px; width: fit-content; max-width: 100%; }
.tab { padding: 10px 14px; border-radius: 999px; border: 0; background: none; cursor: pointer; color: #c9d6e4; font: 500 14.5px/1 var(--sans); }
.tab:hover { background: rgba(220,232,245,.1); color: #fff; }
.tab[aria-current="true"] { background: var(--blue); color: var(--paper); font-weight: 600; }
/* Greyed out for an under 18 (edit.js tabs): still focusable and readable, so the reason on its panel can be reached. */
.tab.is-off { opacity: .55; cursor: not-allowed; text-decoration: line-through; text-decoration-thickness: 1px; }
/* The ten tabs need about 910px at full size (about 945px when the Requests
   badge shows) and about 820px tightened (about 855px with the badge). The page
   has 90% of the window's width: 922px in a 1024px window, 906px with a
   scrollbar. Tighten up to 1100px to keep the bar on one row; above that the
   full size fits, badge and all. Narrower than about 950px it may wrap, as on a
   tablet or phone. */
@media (max-width: 1100px) { .tabs { gap: 3px; } .tab { padding: 8px 11px; } }
@media (max-width: 768px) { .tabs { gap: 2px; } .tab { padding: 8px 10px; } }
.editor { display: grid; grid-template-columns: 200px minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.editor.three { grid-template-columns: 240px minmax(0, 1fr) 300px; }
.side { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 24px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; }
.side button { text-align: left; padding: 10px 12px; border-radius: 10px; border: 0; background: none; cursor: pointer; color: var(--ink2); font: 500 14.5px/1.35 var(--sans); }
.side button:hover { color: var(--ink); }
.side button[aria-current="true"] { background: var(--chip); color: var(--ink); font-weight: 600; }
.panel { position: sticky; top: 24px; }
#samplesBox { margin-top: 28px; }
.list { display: flex; flex-direction: column; }
.list > div { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid var(--line); }
.away { position: fixed; right: 16px; bottom: 16px; max-width: 340px; z-index: 9; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 12px 20px; border-radius: 999px; font-weight: 600; z-index: 10; box-shadow: none; }
.secret { background: var(--greenbg); color: var(--greenfg); border-radius: 16px; padding: 18px; display: grid; gap: 10px; }
.secret input { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--fieldline); background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 13px; }
.msgs { display: flex; flex-direction: column; gap: 10px; max-height: 440px; overflow: auto; padding: 4px; }
.msg { max-width: 80%; padding: 12px 16px; border-radius: 16px; background: var(--chip); white-space: pre-wrap; }
.msg.mine { align-self: flex-end; background: var(--bluebg); }
details summary { cursor: pointer; }

/* A CV, a letter, a reference */
.twocol { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
/* The name scales with the sheet (cqi: the .cvdoc container), not the window, so the editor's narrow preview and a phone show it whole. */
.cvdoc h1 { font-size: clamp(22px, 7cqi, 52px); }
.cvsec { font: 600 11px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--sky); border-bottom: 1px solid var(--line); padding-bottom: 10px; margin: 30px 0 14px; }
.cvitem { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.cvitem b { font: 700 18px/1.3 var(--display); letter-spacing: -.01em; }
.cvitem p { margin: 4px 0 0; color: var(--ink2); white-space: pre-wrap; }
.when { color: var(--mute); white-space: nowrap; font-size: 14px; }
.imp { color: var(--sky); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .chips span, .chips li { padding: 7px 14px; background: var(--chip); border-radius: 999px; font-size: 14px; }
.prose { white-space: pre-wrap; margin: 0; line-height: 1.7; color: var(--ink2); }
.letter .prose { font-size: 18px; color: var(--ink); max-width: 68ch; }
.ref + .ref { border-top: 1px solid var(--line); padding-top: 16px; }
.narrow { max-width: 600px; margin: 0 auto; }
.pin { font-size: 22px; letter-spacing: .15em; text-align: center; font-family: var(--mono); }

/* The footer, as on the company site */
footer { margin-top: 64px; border-top: 1px solid var(--line); font: 400 14px/1.5 var(--sans); color: var(--mute); }
footer .wrap { display: flex; flex-direction: column; gap: 40px; padding-block: 56px 36px; }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px 64px; }
.foot-brand { display: flex; flex-direction: column; gap: 12px; flex: 1 1 320px; }
.foot-brand .name { font: 800 clamp(30px, 4vw, 44px)/1 var(--display); letter-spacing: -.03em; color: var(--ink); }
.foot-brand .name span { color: var(--blue); }
.foot-cols { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.foot-cols div { display: flex; flex-direction: column; gap: 12px; min-width: 140px; }
.foot-cols a { color: var(--ink); text-decoration: none; } .foot-cols a:hover { color: var(--sky); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 20px 64px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.75; }
.foot-legal p { margin: 0; flex: 1 1 420px; }
.foot-legal b { color: var(--ink); }

@media (max-width: 980px) {
  .editor, .editor.three, .twocol, .hero { grid-template-columns: minmax(0, 1fr); }
  .side, .panel { position: static; } .side { flex-direction: row; flex-wrap: wrap; }
  .tabs { border-radius: 24px; }
  .prices, .steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .fields { grid-template-columns: minmax(0, 1fr); }
  .cvitem { flex-direction: column; gap: 2px; }
  .tabs { border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print { .strip, .top, footer, .no-print { display: none !important; } body { background: #fff; color: #000; } .card { box-shadow: none; border-color: #ccc; } }

/* Separate pages, each with its own intro, and "doors" to them from home */
.page-title { font-size: clamp(48px, 7vw, 88px); line-height: .95; letter-spacing: -.045em; text-shadow: none; }
.page-title span { color: var(--blue); }
.lead { margin: 0; max-width: 60ch; font-size: 20px; line-height: 1.6; color: var(--ink2); }
.top nav .btn[aria-current="page"] { background: rgba(220,232,245,.12); color: #fff; }
.door { display: grid; grid-template-columns: 90px minmax(0, 300px) minmax(0, 1fr) 40px; gap: 32px; align-items: center; padding: 36px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.door:hover { background: var(--card); color: var(--ink); }
.door .n { font: 800 64px/1 var(--display); color: transparent; -webkit-text-stroke: 1.5px var(--blue); }
.door b { font: 600 36px/1.05 var(--display); letter-spacing: -.025em; }
.door span:not(.n):not(.arrow) { font-size: 16px; line-height: 1.55; color: var(--ink2); }
.door .arrow { justify-self: end; font-size: 28px; color: var(--blue); }
@media (max-width: 760px) { .door { grid-template-columns: 1fr; gap: 12px; } }

/* Sign in with LinkedIn, in LinkedIn's own colours as its brand guidelines ask. */
.btn.linkedin { background: #0A66C2; border-color: #0A66C2; color: #fff; min-height: 52px; border-radius: 12px; box-shadow: none; font-weight: 600; }
.btn.linkedin:hover { background: #004182; border-color: #004182; color: #fff; }
.foot-mail { font: 600 16px/1.4 var(--sans); color: var(--ink); text-decoration-color: var(--blue); text-underline-offset: 5px; }

/* ---- CV designs.
   A CV is drawn as a sheet of paper, the same on screen as in its PDF, so the
   preview in the editor is what gets printed. cvHtml (cvlib.js) writes the
   parts in one reading order (.cvhead, .cvnote, .cvintro, .cvmain, .cvside);
   a design only places them, so every design reads the same to an employer's
   application tracking system. Classic is free; Modern, Compact and Bold come
   with a pass. The colour (.a-*) and the typeface (.f-*) are free on all four.
   Each colour is 4.5:1 or better against white, against its own pale ground,
   and under white text (tests/cvmaker-designs.test.mjs). No green: on a CV,
   green means only "someone else confirmed this". */
.cvdoc {
  --pad: clamp(22px, 4vw, 44px);
  --accent: #1a5fa8; --accentbg: #eaf1f9;
  --ink: #16202c; --ink2: #3d4855; --mute: #56616e; --line: #d7dde4; --chip: #eef1f4;
  --sky: var(--accent); --blue: var(--accent); --bluebg: var(--accentbg);
  --green: #1a7a4c; --greenbg: #eef7f1; --greenfg: #1a5c3c; --amberbg: #fdf3dc; --amberfg: #6b4a00; --rust: #a3271a; --rustbg: #fbe9e6;
  --cvbody: var(--sans); --cvhead: var(--display); --cvlabel: var(--label);
  background: #fff; color: var(--ink); color-scheme: light; padding: var(--pad); font-family: var(--cvbody);
  container-type: inline-size; overflow: hidden;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.cvdoc:not(.card) { border: 1px solid var(--line); border-radius: 12px; }
.a-blue { --accent: #1a5fa8; --accentbg: #eaf1f9; }
.a-navy { --accent: #1f3a5f; --accentbg: #e9edf3; }
.a-teal { --accent: #0d5f6b; --accentbg: #e5f1f3; }
.a-plum { --accent: #6a2c70; --accentbg: #f4ecf5; }
.a-burgundy { --accent: #8a1c2b; --accentbg: #f8eaec; }
.a-rust { --accent: #96400f; --accentbg: #f8eee7; }
.a-charcoal { --accent: #353c45; --accentbg: #eef0f2; }
.cvdoc.f-serif { --cvbody: Georgia, 'Times New Roman', serif; --cvhead: Georgia, 'Times New Roman', serif; --cvlabel: Georgia, 'Times New Roman', serif; }
.cvdoc.f-plain { --cvbody: Arial, Helvetica, sans-serif; --cvhead: Arial, Helvetica, sans-serif; --cvlabel: Arial, Helvetica, sans-serif; }
.cvdoc h1, .cvdoc .cvitem b { font-family: var(--cvhead); }
/* A word longer than the line breaks rather than being cut off; a normal
   name never breaks mid-word (anywhere would, as soon as the sheet is narrow). */
.cvdoc h1 { overflow-wrap: break-word; }
/* A narrow sheet (a phone, or the editor's preview beside the form) stacks
   each entry's dates under it, by the sheet's own width, not the window's. */
@container (max-width: 480px) { .cvdoc .cvitem { flex-direction: column; gap: 2px; } .cvdoc .when { white-space: normal; } }
.cvdoc .cvsec { font-family: var(--cvlabel); }
.cvdoc .pill:not(.p-ok):not(.p-warn):not(.p-bad):not(.p-info) { color: var(--ink2); }
.cvheadline { font-size: 17px; color: var(--ink2); margin-top: 6px; }
.cvcontact { color: var(--mute); font-size: 14px; margin-top: 6px; } .cvcontact:empty { display: none; }
.cvnote { color: var(--mute); font-size: 14px; margin: 8px 0 0; }
.cvfact { margin-top: 6px; } .cvfact:empty { display: none; }

/* Modern: two columns. The name and everything else are on the left; the
   side panel (skills, interests, references) runs down the right. On the
   right, not the left as first drawn: a program reading a PDF by position
   takes the left column first, and an employer's tracking system must meet
   the name before the skills (browser check, 4 October 2026). A CV with
   nothing for the side stays in one column rather than leaving it empty. */
.cvdoc.d-modern .cvsheet:has(> .cvside) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30%); grid-template-rows: auto auto auto 1fr; grid-template-areas: "head side" "note side" "intro side" "main side"; column-gap: calc(var(--pad) * .8 + 8px); }
.cvdoc.d-modern .cvhead { grid-area: head; } .cvdoc.d-modern .cvnote { grid-area: note; } .cvdoc.d-modern .cvintro { grid-area: intro; } .cvdoc.d-modern .cvmain { grid-area: main; }
/* The panel and Bold's band run to the edges of the sheet only where nothing
   else shares the card: a job version's "Tailored for" heading above the CV
   on a private link must not be covered. */
.cvdoc.d-modern .cvside { grid-area: side; background: var(--accentbg); border-left: 3px solid var(--accent); margin: 0 calc(-1 * var(--pad)) 0 0; padding: max(var(--pad), 16px) max(calc(var(--pad) * .6), 14px); }
@container (min-width: 561px) {
  .cvdoc.d-modern > .cvsheet:first-child .cvside { margin-top: calc(-1 * var(--pad)); }
  .cvdoc.d-modern > .cvsheet:last-child .cvside { margin-bottom: calc(-1 * var(--pad)); }
}
.cvdoc.d-modern h1 { color: var(--accent); font-family: var(--cvbody); font-weight: 700; letter-spacing: -.02em; font-size: clamp(22px, 6cqi, 40px); }
.cvdoc.d-modern .cvsec { color: var(--ink); font-size: 13px; letter-spacing: .02em; text-transform: none; border-bottom: 0; border-left: 3px solid var(--accent); padding: 1px 0 1px 9px; }
.cvdoc.d-modern .cvside .cvsec { color: var(--accent); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; border-left: 0; padding: 0; margin: 26px 0 8px; }
.cvdoc.d-modern .cvside .cvpart:first-child .cvsec { margin-top: 4px; }
.cvdoc.d-modern .cvside .chips { flex-direction: column; gap: 3px; }
.cvdoc.d-modern .cvside .chips li { padding: 0; background: none; border-radius: 0; font-size: 15px; }
@container (max-width: 560px) {
  .cvdoc.d-modern .cvsheet:has(> .cvside) { display: block; }
  .cvdoc.d-modern .cvside { margin: 24px 0 0; padding: 16px; border-left: 0; border-top: 3px solid var(--accent); border-radius: 8px; }
}

/* Compact: smaller type and two columns of sections, to help fit one A4
   page. The editor counts the printed pages (pagesWhenPrinted). */
.cvdoc.d-compact { font-size: 13.5px; line-height: 1.42; }
.cvdoc.d-compact h1 { font-size: clamp(20px, 6cqi, 28px); }
.cvdoc.d-compact .cvhead { border-bottom: 2px solid var(--ink); padding-bottom: 8px; }
.cvdoc.d-compact .cvheadline { font-size: 14.5px; margin-top: 3px; }
.cvdoc.d-compact .cvcontact, .cvdoc.d-compact .cvnote { font-size: 12.5px; margin-top: 3px; }
.cvdoc.d-compact .cvmain, .cvdoc.d-compact .cvside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; }
.cvdoc.d-compact .cvsec { font-size: 10.5px; margin: 14px 0 6px; padding-bottom: 4px; }
.cvdoc.d-compact .cvitem { margin-bottom: 7px; gap: 10px; }
.cvdoc.d-compact .cvitem b { font-size: 14.5px; }
.cvdoc.d-compact .cvitem p { margin-top: 1px; }
.cvdoc.d-compact .when { font-size: 12.5px; }
.cvdoc.d-compact .prose { line-height: 1.45; }
.cvdoc.d-compact .chips { gap: 0 6px; }
.cvdoc.d-compact .chips li { padding: 0; background: none; border-radius: 0; font-size: 13.5px; }
.cvdoc.d-compact .chips li + li { border-left: 1px solid var(--line); padding-left: 6px; }
.cvdoc.d-compact .pill { padding: 2px 8px; font-size: 10.5px; }
.cvdoc.d-compact .fact-note, .cvdoc.d-compact .fact-hist { font-size: 11.5px; margin-top: 2px; }
.cvdoc.d-compact .cvfact { margin-top: 3px; }
@container (max-width: 520px) { .cvdoc.d-compact .cvmain, .cvdoc.d-compact .cvside { display: block; } }

/* Bold: the name in a band of colour across the top. */
.cvdoc.d-bold .cvhead { background: var(--accent); color: #fff; margin: 0 calc(-1 * var(--pad)); padding: max(var(--pad), 22px) max(var(--pad), 24px) max(calc(var(--pad) * .7), 18px); }
.cvdoc.d-bold > .cvsheet:first-child .cvhead { margin-top: calc(-1 * var(--pad)); }
.cvdoc.d-bold h1 { color: #fff; font-size: clamp(22px, 8cqi, 60px); text-transform: uppercase; letter-spacing: -.02em; }
.cvdoc.d-bold .cvheadline, .cvdoc.d-bold .cvcontact { color: #fff; }
.cvdoc.d-bold .cvnote { margin-top: 14px; }
.cvdoc.d-bold .cvsec { font: 800 20px/1.1 var(--cvhead); letter-spacing: -.01em; text-transform: none; color: var(--accent); border-bottom: 3px solid var(--accent); }

/* Off screen, at the printed width, to count pages (pagesWhenPrinted). The
   sizes that depend on the screen are the printed ones, as in @media print. */
.cvdoc.cvprobe { position: absolute; left: -10000px; top: 0; width: 178mm; --pad: 0px; padding: 0; border: 0; border-radius: 0; visibility: hidden; font-size: 16px; }
.cvdoc.cvprobe .cvitem { flex-direction: row; gap: 16px; } .cvdoc.cvprobe.d-compact .cvitem { gap: 10px; }
.cvdoc.cvprobe h1 { font-size: 36px; } .cvdoc.cvprobe.d-modern h1 { font-size: 32px; } .cvdoc.cvprobe.d-bold h1 { font-size: 44px; } .cvdoc.cvprobe.d-compact { font-size: 13.5px; } .cvdoc.cvprobe.d-compact h1 { font-size: 28px; }
.designs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.designs label { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; }
.designs label:has(input:checked) { border-color: var(--blue); background: var(--bluebg); }
.designs input:disabled + b { opacity: .6; }
/* The colour choices in the editor: a dot of each colour (the .a-* classes). */
.swatches { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.swatches label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 15px; }
.swatches .sw { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.swatches input:checked + .sw { box-shadow: 0 0 0 2px var(--sky); }

/* For a job: the list of versions, a box with a "copy from my CV" button above
   it, a group of choices (a fieldset without its default frame), and the
   plan cards on the pass tab, which reuse the .designs cards. */
.list button[aria-current="true"] { border-color: var(--blue); background: var(--bluebg); }
.copyrow { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.copyrow label { font: 600 13px/1.4 var(--sans); color: var(--ink2); }
.f textarea.short { min-height: 96px; }
fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.plain legend { padding: 0; margin-bottom: 10px; }
.incl { display: flex; flex-direction: column; gap: 10px; }
.incl .row { font-size: 15px; align-items: flex-start; gap: 10px; }
.incl .row input { margin-top: 4px; }
.designs.plans label b { font: 700 17px/1.2 var(--display); }

/* Printing and PDF: paper colours and no page furniture. Nothing is added
   to anyone's CV, whether they have a pass or not. */
@media print {
  :root { --paper: #fff; --card: #fff; --ink: #111; --ink2: #333; --mute: #555; --line: #ccc; --sky: #1a5fa8; --blue: #1a5fa8; --green: #1a7a4c; --greenbg: #eef7f1; --greenfg: #1a5c3c; --chip: #f2f2f2; --amberbg: #fdf3dc; --amberfg: #6b4a00; --rust: #a3271a; --rustbg: #fbe9e6; --bluebg: #e6f0fa; }
  body { background: #fff; color: #111; font-size: 12pt; }
  .top, footer, .no-print, aside, .twocol > aside { display: none !important; }
  .twocol { display: block; }
  .cvdoc, .letter { box-shadow: none !important; border: 0 !important; padding: 0 !important; }
  .cvdoc { --pad: 0px; overflow: visible; font-size: 16px; }
  .cvdoc h1 { font-size: 36px; } .cvdoc.d-modern h1 { font-size: 32px; } .cvdoc.d-bold h1 { font-size: 44px; } .cvdoc.d-compact { font-size: 13.5px; } .cvdoc.d-compact h1 { font-size: 28px; }
  .cvsheet .cvitem, .cvsheet .cvsec { break-inside: avoid; } .cvsheet .cvsec { break-after: avoid; }
  /* Wide letter-spacing on capitals comes out of a PDF as "E D U C A T I O N", which an employer's tracking system may not take for a heading. */
  .cvdoc .cvsec { letter-spacing: .03em !important; }
  a { color: inherit; text-decoration: none; }
  /* Pills are drawn light on dark on screen. On paper they need dark text on their pale ground. */
  .pill { color: var(--ink2); } .p-ok { color: var(--greenfg); } .p-warn { color: var(--amberfg); } .p-bad { color: var(--rust); } .p-info { color: var(--sky); }
  @page { margin: 16mm; }
}

/* A fact's history under its pill: who confirmed it and when, and whether it
   was withdrawn, lapsed or changed since. Plain small text, no colour of its own. */
.fact-note, .fact-hist { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--mute); }
.fact-hist div + div { margin-top: 2px; }

/* Said aloud to screen readers and not drawn: the live region for two-press buttons. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Under-18s: what is waiting for a careers lead, and the careers lead's queue. */
.approval { display: grid; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.approval:last-child { border-bottom: 0; }
.approval dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 14px; }
.approval dt { color: var(--mute); }
.approval dd { margin: 0; overflow-wrap: anywhere; }
.approval textarea { width: 100%; min-height: 72px; padding: 12px 14px; border: 1.5px solid var(--fieldline); border-radius: 12px; background: var(--field); color: var(--ink); font: 400 15px/1.5 var(--sans); }
@media (max-width: 600px) { .approval dl { grid-template-columns: minmax(0, 1fr); gap: 0; } .approval dd { margin-bottom: 6px; } }
/* File pickers look like CV Maker's own outlined buttons (7 October 2026). */
input[type=file] { color: var(--ink2); max-width: 100%; }
input[type=file]::file-selector-button { font: 600 14px/1 var(--sans); margin: 0 12px 0 0; padding: 10px 18px;
  border-radius: 999px; border: 1.5px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
input[type=file]::file-selector-button:hover { border-color: var(--ink2); }
/* Skip link: the first thing a keyboard reaches, off-screen until it has focus. */
.skip { position: absolute; left: 12px; top: -200px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: #ffffff; color: #0A1F36; border: 2px solid #0A1F36; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }