/* 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}

/* ============================================================
   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 live CV document
   ============================================================ */
.stage{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  background:var(--ground-2);
  padding:14px 16px 34px;
}
.paper{
  background:var(--paper);
  border-radius:4px;
  box-shadow:0 2px 6px rgba(17,24,39,.08),0 12px 30px rgba(17,24,39,.10);
  padding:26px 22px 30px;
  font-family:var(--serif);
  color:var(--doc-ink);
}
.p-head{text-align:center;padding-bottom:13px}
.p-name{
  font-family:var(--serif);
  font-size:26px;
  font-weight:600;
  line-height:1.2;
  color:var(--doc-ink);
  overflow-wrap:anywhere;
}
.p-ct{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:baseline;
  column-gap:7px;
  row-gap:2px;
  margin-top:11px;
  font-size:10px;
  color:var(--doc-grey);
}
.p-sep{color:var(--doc-rule)}
.p-rule{height:2px;background:var(--blue);margin:0 0 15px;border-radius:1px}
.p-blk{margin-bottom:18px}
.p-blk:last-child{margin-bottom:0}
.p-sec{
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--doc-ink);
  padding-bottom:5px;
  border-bottom:1px solid var(--doc-rule);
  margin-bottom:9px;
}
.p-body{font-size:10.5px;line-height:1.62;color:var(--doc-grey)}
.p-entry{margin-bottom:12px}
.p-entry:last-child{margin-bottom:0}
.p-role{font-size:11.5px;font-weight:600;color:var(--doc-ink);line-height:1.3}
.p-meta{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-top:1px}
.p-org{font-size:10px;color:var(--doc-grey)}
.p-when{font-size:9.5px;color:var(--doc-grey);white-space:nowrap}
.p-list{list-style:none;margin-top:5px}
.p-list li{font-size:10px;line-height:1.62;color:var(--doc-grey);padding-left:10px;position:relative}
.p-list li::before{content:"\2022";position:absolute;left:1px;color:var(--doc-grey)}
.p-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}

/* live wire: the spans on the paper that mirror the tray inputs */
.wire:empty::before{content:attr(data-ph);color:#A9AEB8}
.wire.cur::after{
  content:"";
  display:inline-block;
  width:2px;
  height:0.92em;
  margin-left:2px;
  vertical-align:-0.1em;
  background:var(--blue);
  animation:blink 1.05s step-end infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.swell{position:relative;display:inline-block;max-width:100%}
.swell.wide{display:block}
.swell::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-5px;
  height:3px;
  background:var(--yellow);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform 160ms ease-out;
}
.swell.on::after{transform:scaleX(1)}

/* ============================================================
   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)}

.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:13px;padding-right:13px}
  .paper{padding:22px 17px 26px}
  .p-name{font-size:23px}
  .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}