/* CV ZA shared stylesheet. Owner: foundation agent.
   Identity approved on web/index.html, 24 Aug 2026. Values here are the
   rendered, approved ones. See PLAN.md for the written identity note.
   Load order in every page: this file, then the page's own <style> if any.
   Font link belongs in each page head, not here. */

/* ============================================================
   1. Tokens
   ============================================================ */
:root{
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;

  --blue:#2B44E7;
  --blue-hi:#2438C4;
  --blue-soft:#EDF1FE;
  --yellow:#FFC400;
  --yellow-hi:#EDB600;
  --cyan:#38B6E3;

  --text:#15171C;
  --muted:#6B7280;
  --soft:#8A9099;
  --grey:#5A6070;
  --line:#EAECF0;
  --card:#FFFFFF;
  --ground-2:#F6F7FA;

  --t-blue:#DBE8FA;
  --t-orange:#FCE4D2;
  --t-mint:#D7EFE2;
  --t-yellow:#FCEFC9;

  --paper:#FFFFFF;
  --doc-ink:#1A1C22;
  --doc-grey:#5A6070;
  --doc-rule:#D9DCE3;

  --ok:#137A46;
  /* Error red is a crimson, not a brick red. Anything in the orange to rust
     band (hue under 32) trips two separate design bans at once. Do not
     "fix" this to a warmer red without re-running the gate. */
  --warn:#C62145;

  --sh-1:0 1px 3px rgba(17,24,39,.06);
  --sh-2:0 6px 18px rgba(17,24,39,.10),0 1px 3px rgba(17,24,39,.06);
  --sh-3:0 10px 24px rgba(17,24,39,.22),0 3px 8px rgba(17,24,39,.14);
  --sh-up:0 -8px 26px rgba(17,24,39,.10);
}

/* ============================================================
   2. Base
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
/* Author display rules beat the UA stylesheet, so .btn{display:block} would
   otherwise defeat the hidden attribute. Every agent relies on hidden to
   switch panels and buttons, so it wins here. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;background:#E9ECF2}
body{
  font-family:var(--sans);
  background:#E9ECF2;
  color:#15171C;
  font-size:16px;
  line-height:1.45;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.app{
  width:100%;
  max-width:480px;
  margin:0 auto;
  height:100vh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  position:relative;
  background:var(--card);
  overflow:hidden;
}
.ic{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   3. Curved blue header (home)
   ============================================================ */
.hdr{
  position:relative;
  background:var(--blue);
  border-radius:0 0 50% 50% / 0 0 46px 46px;
  overflow:hidden;
  padding:22px 20px 32px;
}
.circ{position:absolute;border-radius:50%;pointer-events:none}
.c-y{background:var(--yellow);width:128px;height:128px;top:-46px;right:14%}
.c-c{background:var(--cyan);width:216px;height:216px;bottom:-58px;right:-70px}
.hin{position:relative;z-index:1}
.brandline{font-size:13px;font-weight:400;color:rgba(255,255,255,.82);letter-spacing:0.005em}

/* The wordmark. CV in the ink colour, ZA in the royal blue, the two halves
   split by colour and never by weight. It only ever sits on a white or near
   white ground: on the blue header band the ink half would disappear, which
   is why no header carries it. assets/card.js draws the same lockup on the
   blue status card with white and yellow instead, for the same reason. */
.wm{font-weight:700;color:var(--text);letter-spacing:-0.005em;white-space:nowrap}
.wm i{font-style:normal;color:var(--blue)}
.h1{
  margin-top:18px;
  font-size:38px;
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.03em;
  color:#FFFFFF;
  max-width:62%;
  text-wrap:balance;
}
.sub{
  margin-top:11px;
  font-size:15px;
  font-weight:400;
  line-height:1.42;
  color:rgba(255,255,255,.88);
  max-width:76%;
  text-wrap:balance;
}
.search{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:20px;
  background:#FFFFFF;
  border-radius:28px;
  padding:0 18px;
  height:54px;
  box-shadow:0 8px 22px rgba(14,20,60,.16),0 2px 5px rgba(14,20,60,.08);
}
.search svg{width:19px;height:19px;flex:0 0 19px;color:var(--soft)}
.search input{
  flex:1 1 auto;
  min-width:0;
  font-family:inherit;
  font-size:15.5px;
  font-weight:400;
  color:var(--text);
  background:none;
  border:0;
  outline:none;
  height:100%;
}
.search input::placeholder{color:#9CA3AF}

/* The Vantum mark. CV ZA is a Vantum product, so every header carries a
   small link back to Vantum. It is type and not a logo: the size and weight
   of the line it sits beside, in a colour the page already uses. On the blue
   band that is the white the brandline uses, because the royal blue on the
   royal blue reads as nothing. On a white bar it is the blue itself. */
.hdr-top{display:flex;align-items:baseline;justify-content:flex-start;gap:8px}
.hdr-top .byv::before{content:"\00b7";margin-right:8px}
.hdr-top .brandline{margin:0}
.byv{
  flex:0 0 auto;
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.005em;
  white-space:nowrap;
  text-decoration:none;
}
.hdr .byv{color:rgba(255,255,255,.82)}
.hdr .byv:hover{color:#FFFFFF}
.hdr .byv:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;border-radius:6px}
.tbar .byv{color:var(--blue)}
/* The back row on the trust pages carries the mark beside the Back button,
   and to the left of it, because the far right of that band is where the
   yellow circle sits and white on yellow cannot be read. */
.back-row{display:flex;align-items:center;gap:12px}

/* ============================================================
   4. Plain top bar (inner pages)
   ============================================================ */
.tbar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  background:var(--card);
  border-bottom:1px solid var(--line);
}
.tbar .back{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  margin-left:-6px;
  border-radius:19px;
  color:var(--text);
  text-decoration:none;
  background:none;
  border:0;
  cursor:pointer;
  transition:background 150ms ease-out;
}
.tbar .back:hover{background:var(--ground-2)}
.tbar .back svg{width:22px;height:22px}
.tbar h1{font-size:16px;font-weight:700;letter-spacing:-0.01em;color:var(--text)}
.tbar .tbar-note{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--blue)}

/* ============================================================
   5. Filter chips
   ============================================================ */
.filts{
  display:flex;
  gap:9px;
  overflow-x:auto;
  scrollbar-width:none;
  padding:20px 18px 4px;
  scroll-padding-left:18px;
}
.filts::-webkit-scrollbar{display:none}
.filt{
  flex:0 0 auto;
  font-family:inherit;
  font-size:13.5px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  color:var(--text);
  background:#FFFFFF;
  border:1px solid var(--line);
  border-radius:22px;
  padding:11px 16px;
  cursor:pointer;
  transition:background 150ms ease-out,color 150ms ease-out;
}
.filt.on{background:var(--blue);border-color:var(--blue);color:#FFFFFF}
.filt:not(.on):hover{background:#F5F6F8}

/* ============================================================
   6. Template grid
   ============================================================ */
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
  padding:16px 18px 26px;
}
.tile{
  display:block;
  border-radius:18px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  background:var(--t-blue);
  box-shadow:0 6px 18px rgba(17,24,39,.10),0 1px 3px rgba(17,24,39,.06);
  transition:transform 150ms ease-out,box-shadow 150ms ease-out;
}
.tile:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(17,24,39,.14),0 2px 5px rgba(17,24,39,.07)}
.tile.t2{background:var(--t-orange)}
.tile.t3{background:var(--t-mint)}
.tile.t4{background:var(--t-yellow)}
/* height:auto is load bearing: the width/height attributes on the img are
   presentational hints that otherwise beat aspect-ratio and blow up the crop. */
.tile img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center top}
.tlab{display:block;padding:12px 13px 14px;font-size:13.5px;font-weight:600;letter-spacing:-0.01em;color:var(--text)}

/* ============================================================
   7. Floating action button
   ============================================================ */
.fab{
  position:absolute;
  right:18px;
  bottom:84px;
  z-index:5;
  width:60px;
  height:60px;
  border-radius:50%;
  background:var(--yellow);
  color:#1A1D23;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(17,24,39,.22),0 3px 8px rgba(17,24,39,.14);
  transition:background 150ms ease-out,transform 150ms ease-out;
}
.fab:hover{background:var(--yellow-hi);transform:translateY(-2px)}
.fab svg{width:26px;height:26px;stroke-width:2}

/* ============================================================
   8. Bottom nav
   ============================================================ */
.nav{
  flex:0 0 auto;
  position:relative;
  z-index:6;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:#FFFFFF;
  border-top:1px solid var(--line);
  padding:9px 0 7px;
  padding-bottom:calc(7px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -4px 18px rgba(17,24,39,.06);
}
.nitem{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  font-size:11px;
  font-weight:600;
  color:var(--soft);
  text-decoration:none;
}
.nitem svg{width:22px;height:22px}
.nitem.on{color:var(--blue)}
.nitem.on::after{content:"";display:block;width:18px;height:3px;border-radius:2px;background:var(--blue);margin-top:1px}

/* ============================================================
   9. Buttons
   ============================================================ */
.btn{
  display:block;
  width:100%;
  font-family:inherit;
  font-size:17px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-0.01em;
  text-align:center;
  text-decoration:none;
  padding:16px;
  border:0;
  border-radius:14px;
  cursor:pointer;
  transition:background 150ms ease-out,color 150ms ease-out,transform 150ms ease-out;
}
.btn-y{background:var(--yellow);color:#1A1D23}
.btn-y:hover{background:var(--yellow-hi)}
.btn-b{background:var(--blue);color:#FFFFFF}
.btn-b:hover{background:var(--blue-hi)}
.btn-ghost{background:var(--card);color:var(--text);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--ground-2)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.btn-row{display:flex;gap:10px}
.btn-row .btn{width:auto;flex:1 1 auto}
.btn-row .btn.narrow{flex:0 0 auto;padding-left:20px;padding-right:20px}
.linkbtn{
  display:inline-block;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  color:var(--blue);
  background:none;
  border:0;
  padding:6px 0;
  cursor:pointer;
  text-decoration:none;
}
.linkbtn:hover{color:var(--blue-hi)}

/* ============================================================
   10. Bottom tray (builder, export)
   ============================================================ */
/* The tray is capped and scrolls inside itself. A step with many fields, or
   a short phone, must never squeeze the paper to nothing or push the primary
   button off screen. Put fields in .tray-body and the CTA in .btn-row. */
.tray{
  flex:0 0 auto;
  max-height:62%;
  display:flex;
  flex-direction:column;
  position:relative;
  z-index:4;
  margin-top:-14px;
  background:var(--card);
  border-radius:18px 18px 0 0;
  overflow:hidden;
  padding:0 18px 18px;
  padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));
  box-shadow:var(--sh-up);
}
.tray-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.tray > .btn-row{flex:0 0 auto;margin-top:14px}
.prog{height:3px;background:var(--line);margin:0 -18px}
.prog i{display:block;height:100%;width:20%;background:var(--blue);transition:width 180ms ease-out}
.grip{width:36px;height:4px;margin:10px auto 12px;background:#D7DAE1;border-radius:2px}
.step{font-size:12.5px;font-weight:700;letter-spacing:0.01em;color:var(--blue)}
.q{
  font-size:24px;
  font-weight:700;
  line-height:1.18;
  letter-spacing:-0.02em;
  color:var(--text);
  margin:5px 0 16px;
  text-wrap:balance;
}
.qnote{font-size:13.5px;line-height:1.45;color:var(--grey);margin:-8px 0 16px}

/* ============================================================
   11. Fields
   ============================================================ */
.field{margin-bottom:12px}
.field:last-child{margin-bottom:0}
.field > label{display:block;font-size:12.5px;font-weight:600;color:var(--grey);margin-bottom:6px}
.input,.select{
  display:block;
  width:100%;
  font-family:inherit;
  font-size:17px;
  font-weight:400;
  line-height:1.3;
  color:var(--text);
  background:var(--card);
  padding:13px 14px;
  border:1.5px solid #DDE0E7;
  border-radius:12px;
  outline:none;
  transition:border-color 150ms ease-out,box-shadow 150ms ease-out;
}
.input::placeholder{color:#9CA3AF}
.input:focus,.select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(43,68,231,.14)}
.select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:40px;
  background-image:none;
  cursor:pointer;
}
.selwrap{position:relative}
.selwrap svg{
  position:absolute;
  right:14px;
  top:50%;
  margin-top:-9px;
  width:18px;
  height:18px;
  color:var(--soft);
  pointer-events:none;
}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.err{font-size:12.5px;font-weight:600;color:var(--warn);margin-top:6px}
.input.bad,.select.bad{border-color:var(--warn)}

/* pick chips, for skills and yes/no choices */
.picks{display:flex;flex-wrap:wrap;gap:8px}
.pick{
  font-family:inherit;
  font-size:13.5px;
  font-weight:600;
  line-height:1;
  color:var(--text);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:10px 14px;
  cursor:pointer;
  transition:background 150ms ease-out,border-color 150ms ease-out,color 150ms ease-out;
}
.pick.on{background:var(--blue);border-color:var(--blue);color:#FFFFFF}
.pick:not(.on):hover{background:var(--ground-2)}

/* ============================================================
   12. The paper: the real document on screen

   One renderer, one look. templates.js describes the CV, pdf.js lays it
   out, and every screen that shows a CV draws those same positioned
   operations at one pixel to the point. The builder preview and the
   download page are therefore the same picture of the same file, which is
   the whole point: what a person watches themselves fill in is what comes
   out of the download button.

   Nothing here styles a CV. Colour, type and spacing all arrive from the
   layout. These rules only give the page its white, its edge and the scale
   that fits an A4 sheet onto a phone.
   ============================================================ */
.stage{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--ground-2);
  padding:14px 14px 34px;
}
/* .fit holds the scaled footprint so the scroll area knows how tall the
   pages really are; .board does the scaling. */
.fit{position:relative;margin:0 auto}
.board{position:absolute;top:0;left:0;transform-origin:top left}
.pg{
  position:relative;
  overflow:hidden;
  background:var(--paper);
  box-shadow:0 2px 6px rgba(17,24,39,.10),0 14px 34px rgba(17,24,39,.13);
}
.pg + .pg{margin-top:18px}
.pg > i{position:absolute;display:block}
.pg > span{position:absolute;display:block;white-space:pre;font-synthesis:none}

/* The part of the document the current step writes into. A soft yellow
   wash over the lines themselves, because the document has no boxes to
   put a border on. */
.pg > b.spot{
  position:absolute;
  display:block;
  background:var(--yellow);
  opacity:.20;
  border-radius:2px;
  pointer-events:none;
  transition:opacity 160ms ease-out;
}
/* While the AI writes, the real text drops back and grey bars stand in its
   place, with one soft white bar travelling across them. The bar is a
   blurred solid, not a gradient, because gradients are banned. */
.pg > span[data-t].busy{opacity:.12;transition:opacity 140ms ease-out}
.sk{position:absolute;display:block;border-radius:3px;background:#E4E7EE}
.sweep{
  position:absolute;
  display:block;
  width:70px;
  background:#FFFFFF;
  opacity:.65;
  filter:blur(13px);
  animation:sweep 1150ms linear infinite;
}
@keyframes sweep{from{transform:translateX(-90px)}to{transform:translateX(var(--far,300px))}}

/* Word reveal. Each word carries its own delay so the sentence arrives left
   to right; the move itself stays inside the 180ms house limit. */
.pg .w{
  display:inline-block;
  opacity:0;
  transform:translateY(2px);
  transition:opacity 160ms ease-out,transform 160ms ease-out;
}
.pg .w.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .pg > b.spot{transition:none}
  .sweep{animation:none;opacity:.35}
  .pg .w{transition:none;opacity:1;transform:none}
}

/* ============================================================
   13. Small shared pieces
   ============================================================ */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--sh-1);
}
.note{
  background:var(--blue-soft);
  border-radius:12px;
  padding:13px 15px;
  font-size:13.5px;
  line-height:1.5;
  color:var(--text);
}
/* Row link: an icon, two lines and a chevron. Used for the Tips entry on
   home and in Profile now that Tips is off the bottom nav. */
.rowlink{
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px 16px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  text-decoration:none;
  color:inherit;
  box-shadow:var(--sh-1);
  transition:border-color 150ms ease-out,transform 150ms ease-out;
}
.rowlink:hover{border-color:#CBD2E0;transform:translateY(-1px)}
.rowlink-ic{
  flex:0 0 42px;
  width:42px;
  height:42px;
  border-radius:13px;
  background:var(--blue-soft);
  color:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
}
.rowlink-ic svg{width:21px;height:21px}
.rowlink-tx{flex:1 1 auto;min-width:0}
.rowlink-t{display:block;font-size:14.5px;font-weight:700;letter-spacing:-0.01em;color:var(--text)}
.rowlink-s{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--grey)}
.rowlink-go{flex:0 0 18px;width:18px;height:18px;color:var(--soft)}

/* The trust footer. Written here so a page carries it with no script.
   assets/track.js paints the same rules and skips any page that already
   has one of these. */
.mz-foot{padding:2px 22px 16px;text-align:center;font-size:12px;line-height:1.5;color:#8A9099}
.mz-foot a{color:#5A6070;font-weight:600;text-decoration:underline}
.mz-foot .byline{display:block;margin-top:4px}
.tray .mz-foot{padding-bottom:6px}

/* What next: the three doors offered on export.html once the PDF is in the
   person's hands. Rows are the home page rowlink, so nothing new is drawn
   here beyond the spacing that puts them under the download button. */
.nextcard{margin-top:16px}
.nextcard h2{font-size:15px;font-weight:700;letter-spacing:-0.01em;color:var(--text)}
.nextcard .rowlink{width:100%;margin-top:10px;text-align:left;font-family:inherit;cursor:pointer}

.stub{
  background:var(--ground-2);
  border:1px dashed #C9CEDA;
  border-radius:12px;
  padding:16px;
  font-size:13.5px;
  line-height:1.5;
  color:var(--grey);
}
.stub b{display:block;font-weight:700;color:var(--text);margin-bottom:3px}

/* ============================================================
   14. Widths
   ============================================================ */
@media (max-width:379px){
  .hdr{padding:18px 16px 28px}
  .h1{font-size:33px;max-width:72%}
  .sub{font-size:14.5px;max-width:82%}
  .search{height:50px;padding:0 15px}
  .filts{padding-left:16px;padding-right:16px}
  .grid{padding-left:16px;padding-right:16px;gap:11px}
  .tlab{font-size:12.5px;padding:9px 11px 11px}
  .fab{right:15px;width:56px;height:56px}
  .stage{padding-left:11px;padding-right:11px}
  .q{font-size:22px}
  .tray{padding-left:15px;padding-right:15px}
  .prog{margin:0 -15px}
}
@media (max-height:700px){
  .q{font-size:21px;margin:4px 0 12px}
  .grip{margin:8px auto 10px}
  .btn{padding:14px}
}
@media (min-width:481px){
  body{display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh}
  .app{
    height:min(calc(100dvh - 56px),880px);
    border-radius:20px;
    box-shadow:0 24px 70px rgba(17,24,39,.22);
  }
}

/* home: no search results line */
.nores{margin:6px 18px 2px;font-size:14px;color:#5A6070;line-height:1.5}