/* Seeran app pages (/jobs/). Copied from the approved screens (design/new-flow/mock/approved-16-oct):
   the shared stylesheet of pages 3 to 10, the sidebar and My jobs extras of pages 11 to 13,
   the subject, version and offer parts of page 5, and sidebar colour A (page 6). Additions for
   parts the pages don't draw are at the end, marked. */
@font-face{font-family:"Aeonik";src:url("/fonts/Aeonik-Regular.woff2") format("woff2");font-weight:400}
@font-face{font-family:"Aeonik";src:url("/fonts/Aeonik-Medium.woff2") format("woff2");font-weight:500}
@font-face{font-family:"Aeonik";src:url("/fonts/Aeonik-Bold.woff2") format("woff2");font-weight:700}

:root{
  --bg:#f3f2ee; --bg2:#ecebe6; --card:#faf9f6; --panel:#e8e6e0;
  --ink:#141414; --body:#35332f; --label:#5d5a54; --hair:rgba(20,20,20,.10);
  --purple:#5722CB; --purple-ink:#3d1a9e; --mark:#e0d8f5; --amber:#a86f00; --mint:#2f7a55; --coral:#c2412c;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{margin:0;background:var(--bg);font-family:Aeonik,-apple-system,sans-serif;color:var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--purple)}
button,input,textarea{font-family:inherit}
.app{display:flex;flex-wrap:wrap;min-height:100vh;position:relative}
.app.modal{height:100vh;overflow:hidden}

/* sidebar: Perplexity frame, quiet chrome */
.side,.drawer{background:var(--bg2);padding:16px 12px;display:flex;flex-direction:column;gap:2px}
.side{flex:0 0 248px;position:sticky;top:0;height:100vh;align-self:flex-start}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
.mk{display:block;width:28px;height:28px;flex:none}
.brand b{font-family:"Bricolage Grotesque",Aeonik,sans-serif;font-weight:600;color:var(--ink);font-size:21px;line-height:1;letter-spacing:-.015em}
.brand b span{color:var(--purple)}
.nav{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px;border-radius:12px;font-size:15px;color:var(--ink);text-decoration:none}
.nav.on{background:var(--card)}
.nav small{display:block;font-size:13px;color:var(--label)}
.lbl{font-size:13px;color:var(--label);padding:18px 10px 6px}
.muted{font-size:14px;color:var(--label);padding:2px 10px;line-height:1.45}
.grow{flex:1}
.credits{margin:0 8px 12px;font-size:13px;color:var(--label);line-height:1.4}
.credits b{color:var(--ink);font-weight:500}
.credits p+p{margin-top:6px}
.meter{display:flex;gap:4px;margin-top:8px}
.meter i{height:4px;flex:1;border-radius:2px;background:var(--panel)}
.meter i.on{background:var(--ink)}
.me{display:flex;align-items:center;gap:10px;border-top:1px solid var(--hair);padding:12px 8px 0;font-size:14px;color:var(--ink)}
.av{width:32px;height:32px;border-radius:50%;background:var(--panel);display:grid;place-items:center;font-size:13px;font-weight:500;flex:none}

/* main */
.main{flex:999 1 560px;min-width:0;padding:32px 40px 64px}
.wrap{max-width:1040px;margin:0 auto}
.wrap.narrow{max-width:680px}
.for{font-size:14px;color:var(--label)}
.for b{color:var(--ink);font-weight:500}
.title{font-size:44px;line-height:1.04;font-weight:500;letter-spacing:-.035em;color:var(--ink)}
.lead{font-size:17px;line-height:1.5;color:var(--body);margin-top:12px;max-width:62ch}
.k{font-size:13px;color:var(--label)}
.hint{font-size:14px;line-height:1.45;color:var(--label)}

/* Contra-style person hero */
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:24px;padding:28px 0 32px;border-bottom:1px solid var(--hair)}
.face{width:88px;height:88px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:30px;font-weight:500;letter-spacing:-.02em;flex:none}
.who{flex:1 1 320px;min-width:0}
.who h1{font-size:44px;line-height:1.02;font-weight:500;letter-spacing:-.035em;color:var(--ink)}
.who p{font-size:17px;color:var(--body);margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:var(--card);border:1px solid var(--hair);font-size:14px;color:var(--ink);text-decoration:none}
.chip .d{width:8px;height:8px;border-radius:50%}
.chip em{font-style:normal;color:var(--label)}
.act{display:flex;flex-direction:column;gap:8px;align-items:stretch;flex:0 0 240px}
.act small{font-size:13px;color:var(--label);text-align:center;line-height:1.4}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 24px;border-radius:999px;border:0;font-size:16px;font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn.primary{background:var(--purple);color:#fff}
.btn.quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(20,20,20,.18)}
.btn.white{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(20,20,20,.18)}
.btn.off{background:var(--panel);color:var(--label);cursor:default}
.btn.sm{height:44px;padding:0 18px;font-size:15px}

/* Jace-style body: draft + notes panel */
.grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;margin-top:28px;align-items:start}
.draft{background:var(--card);border:1px solid var(--hair);border-radius:20px;overflow:hidden}
.seg{display:flex;gap:4px;padding:6px;margin:16px 20px 4px;background:var(--panel);border-radius:999px;width:max-content}
.seg button{height:34px;padding:0 16px;border-radius:999px;border:0;background:transparent;font-size:14px;color:var(--label);cursor:pointer}
.seg button.on{background:var(--card);color:var(--ink);font-weight:500;box-shadow:0 1px 2px rgba(20,20,20,.08)}
.row{display:flex;gap:14px;align-items:baseline;padding:13px 24px;border-bottom:1px solid var(--hair);font-size:15px;line-height:1.45}
.row span{flex:0 0 58px;color:var(--label)}
.row b{font-weight:500;color:var(--ink)}
.letter{padding:20px 24px 8px;font-size:17px;line-height:1.6;color:var(--ink)}
.letter p+p{margin-top:12px}
.hl{background:var(--mark);border-radius:4px;padding:1px 3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px 18px;border-top:1px solid var(--hair);margin-top:12px}
.foot p{font-size:13px;color:var(--label);display:flex;align-items:center;gap:8px;line-height:1.4}
.notes{display:flex;flex-direction:column;gap:12px;position:sticky;top:24px}
.angle{background:var(--ink);color:var(--bg);border-radius:20px;padding:22px}
.angle .k{color:#bdb8ae}
.angle h2{font-size:22px;line-height:1.25;font-weight:500;letter-spacing:-.02em;margin-top:8px}
.angle a{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;color:#d9d4ca;text-decoration:none;border-bottom:1px solid rgba(217,212,202,.4);padding-bottom:1px}
.checks{background:var(--card);border:1px solid var(--hair);border-radius:20px;padding:18px 20px}
.checks>.k{margin-bottom:6px}
.ck{display:flex;gap:12px;align-items:flex-start;padding:10px 0}
.ck+.ck{border-top:1px solid var(--hair)}
.ck svg,.ck .ring{flex:none;margin-top:2px}
.ck b{display:block;font-size:15px;font-weight:500;color:var(--ink)}
.ck span{font-size:13px;color:var(--label);line-height:1.4}
.ck.wait b{color:var(--label);font-weight:400}

/* signed out: no sidebar, just the mark and Sign in */
.outbar{flex:1 1 100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 32px;height:76px}
.outbar .brand,.topbar .brand{padding:0}
.outbar+.main{padding-top:24px}

/* landing composer (Perplexity's big box) */
.center{display:flex;align-items:center}
.display{font-size:56px;line-height:1.02;font-weight:500;letter-spacing:-.04em;color:var(--ink);text-align:center}
.center .lead{text-align:center;margin:16px auto 0}
.composer{margin-top:32px;background:var(--card);border:1px solid var(--hair);border-radius:24px;padding:18px 18px 14px;box-shadow:0 1px 2px rgba(20,20,20,.04),0 12px 32px rgba(20,20,20,.06)}
.composer textarea{display:block;width:100%;border:0;background:transparent;resize:none;font-size:17px;line-height:1.5;color:var(--ink);margin-top:6px;outline:none}
.composer textarea::placeholder,.field input::placeholder{color:#8a867e}
.crow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.field{display:flex;align-items:center;gap:8px;flex:1 1 240px;height:48px;border-radius:999px;background:var(--bg2);padding:0 16px}
.field input{border:0;background:transparent;font-size:15px;color:var(--ink);flex:1;outline:none;min-width:0}
.how{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:40px;padding-top:24px;border-top:1px solid var(--hair)}
.how li{font-size:15px;line-height:1.4;color:var(--ink)}
.how li span{display:block;font-size:13px;color:var(--label);margin-bottom:6px;font-variant-numeric:tabular-nums}

/* dialogs */
.scrim{position:absolute;inset:0;background:rgba(20,20,20,.42);display:flex;align-items:center;justify-content:center;padding:24px;z-index:5}
.dialog{width:100%;max-width:440px;background:var(--bg);border-radius:28px;padding:28px;box-shadow:0 24px 60px rgba(20,20,20,.25)}
.grab{display:none;width:40px;height:5px;border-radius:3px;background:#cfcbc2;margin:0 auto 16px}
.saved{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:12px 14px}
.logo{width:36px;height:36px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--hair);color:var(--label);display:grid;place-items:center;flex:none;position:relative;overflow:hidden}
.logo img{position:absolute;inset:0;margin:auto;width:24px;height:24px;background:#fff;border-radius:4px}
.saved b{display:block;font-size:15px;font-weight:500;color:var(--ink)}
.saved span{font-size:13px;color:var(--label)}
.dialog h2{font-size:28px;line-height:1.1;font-weight:500;letter-spacing:-.03em;color:var(--ink);margin-top:22px}
.dialog .hint{margin-top:8px}
.or{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--label);margin:18px 0 10px}
.or::before,.or::after{content:"";height:1px;flex:1;background:var(--hair)}
.input{display:block;width:100%;height:52px;border-radius:14px;border:1px solid rgba(20,20,20,.16);background:var(--card);padding:0 16px;font-size:16px;color:var(--ink)}

/* CV */
.stepper{display:flex;align-items:center;gap:12px;margin:18px 0 14px}
.stepper .meter{width:96px;margin:0}
.drop{border:1.5px dashed rgba(20,20,20,.28);border-radius:20px;padding:36px 24px;text-align:center;background:var(--card)}
.drop b{display:block;font-size:18px;font-weight:500;color:var(--ink);margin-top:12px}
.drop p{font-size:14px;color:var(--label);margin-top:6px}
.tick{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--body);padding:14px 0}
.tick+.tick{border-top:1px solid var(--hair)}
.box{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:none;margin-top:1px}
.box.on{background:var(--ink)}
.box.offb{background:var(--card);box-shadow:inset 0 0 0 1.5px #8a867e}
.panel{background:var(--card);border:1px solid var(--hair);border-radius:20px;padding:20px 24px}
.snip{font-size:16px;line-height:1.6;color:var(--ink);margin-top:10px}
.gap{display:inline;border:1.5px dashed rgba(20,20,20,.3);border-radius:4px;padding:1px 6px;color:var(--label)}

/* working */
.ring{width:18px;height:18px;border-radius:50%;border:2.4px solid var(--purple);border-right-color:transparent;animation:spin .8s linear infinite}
.ring.sm{width:12px;height:12px;border-width:2px}
.hollow{width:18px;height:18px;border-radius:50%;border:1.6px solid #a9a59c;flex:none;margin-top:2px}
@keyframes spin{to{transform:rotate(360deg)}}
.bar{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--panel) 0%,var(--bg2) 50%,var(--panel) 100%);background-size:200% 100%;animation:shine 1.6s ease-in-out infinite}
.bar+.bar{margin-top:12px}
.para{padding:6px 24px 14px}
.para+.para{padding-top:10px}
@keyframes shine{from{background-position:100% 0}to{background-position:-100% 0}}
.face.ghost{background:var(--panel)}

/* locked */
.banner{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:14px 16px 14px 18px;margin-bottom:24px}
.banner .d{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--amber);margin-right:10px;vertical-align:2px}
.banner p{flex:1 1 360px;font-size:15px;line-height:1.45;color:var(--ink)}
.banner p span{color:var(--label)}
.blur{filter:blur(7px);user-select:none}
.face.lock{background:var(--panel);color:var(--ink)}
.slot{display:flex;gap:16px;padding:14px 24px;border-bottom:1px solid var(--hair);font-size:16px;line-height:1.5;color:var(--ink)}
.slot span{flex:0 0 132px;font-size:14px;color:var(--label);padding-top:2px}
.slot:last-of-type{border-bottom:0}
.dtitle{padding:20px 24px 12px;border-bottom:1px solid var(--hair)}
.dtitle h2{font-size:20px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.dtitle p{font-size:14px;color:var(--label);margin-top:4px}

/* price (Suno credits layout) */
.price{max-width:420px;padding:0;overflow:hidden}
.phead{background:var(--ink);color:var(--bg);padding:16px 24px 26px;text-align:center}
.phead .top{display:flex;align-items:center;justify-content:space-between}
.phead .top span{font-size:15px;font-weight:500}
.x{width:44px;height:44px;border-radius:50%;border:0;background:rgba(243,242,238,.12);display:grid;place-items:center;cursor:pointer}
.big0{font-size:64px;line-height:1;font-weight:500;letter-spacing:-.04em;margin-top:10px;font-variant-numeric:tabular-nums}
.phead small{display:block;font-size:13px;color:#bdb8ae;margin-top:6px}
.phead h2{font-size:22px;line-height:1.2;font-weight:500;letter-spacing:-.02em;color:var(--bg);margin-top:16px}
.pbody{padding:18px 18px 22px}
.tag{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;background:var(--mark);color:var(--purple-ink);font-size:12px;font-weight:500}
.pack{display:flex;align-items:center;gap:14px;border-radius:16px;padding:14px 16px;background:var(--card);border:1px solid var(--hair);margin-top:8px;cursor:pointer}
.pack.on{box-shadow:inset 0 0 0 2px var(--ink);border-color:transparent}
.radio{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.6px #8a867e;flex:none}
.pack.on .radio{box-shadow:inset 0 0 0 6px var(--purple)}
.pack b{display:block;font-size:17px;font-weight:500;color:var(--ink)}
.pack .per{font-size:13px;color:var(--label)}
.pack .amt{margin-left:auto;text-align:right}
.pack .amt b{font-size:20px;font-variant-numeric:tabular-nums}
.pack s{display:block;margin-top:2px;font-size:13px;color:var(--label);font-variant-numeric:tabular-nums}
.pbody .hint{margin-top:14px;color:var(--body)}
.fine{font-size:13px;line-height:1.45;color:var(--label);text-align:center;margin-top:12px}

/* states */
.states{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}
.state{background:var(--card);border:1px solid var(--hair);border-radius:20px;padding:22px 24px;display:flex;flex-direction:column;align-items:flex-start}
.state h2{font-size:24px;line-height:1.15;font-weight:500;letter-spacing:-.025em;color:var(--ink);margin-top:14px}
.state p{font-size:15px;line-height:1.5;color:var(--body);margin-top:8px}
.state .meta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--label);margin-top:14px;padding-top:14px;border-top:1px solid var(--hair);align-self:stretch}
.state .btn{margin-top:18px}
.state .grow{flex:1}

/* phone top bar */
.topbar{display:none;align-items:center;gap:10px;margin-bottom:8px}
.topbar .menu{width:44px;height:44px;border-radius:50%;border:0;background:var(--bg2);display:grid;place-items:center}
.topbar .credit{margin-left:auto;font-size:13px;color:var(--label)}
.topbar .credit b{color:var(--ink);font-weight:500}
.topbar a.credit{color:var(--ink);font-size:15px;font-weight:500;text-decoration:none;height:44px;display:flex;align-items:center;padding:0 4px}
.drawer{position:absolute;top:0;left:0;bottom:0;width:304px;z-index:6;box-shadow:12px 0 40px rgba(20,20,20,.18)}
.drawer .x{background:var(--card);margin-left:auto}

@media (max-width:900px){
  .side{display:none}
  .main{padding:16px 16px 48px}
  .outbar{padding:12px 16px;height:68px}
  .outbar+.main{padding-top:8px}
  .center{align-items:flex-start}
  .topbar{display:flex}
  .title{font-size:32px}
  .display{font-size:36px;margin-top:20px}
  .lead{font-size:16px}
  .composer{margin-top:22px;padding:16px}
  .composer textarea{font-size:16px}
  .crow .btn{flex:1 1 100%}
  .how{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:28px}
  .how li{display:flex;gap:12px}.how li span{margin:0;flex:0 0 16px}
  .hero{gap:16px;padding:18px 0 22px}
  .face{width:64px;height:64px;font-size:22px}
  .who h1{font-size:34px}
  .act{flex:1 1 100%}
  .grid{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:20px}
  .notes{position:static;order:-1}
  .notes.after{order:0}
  .row{padding:12px 16px}.seg{width:auto;display:flex;margin:12px 16px 4px}.seg button{flex:1;padding:0 8px}.letter{padding:16px 16px 6px;font-size:16px}.foot{padding:12px 16px 16px}
  .para{padding:6px 16px 12px}
  .slot{flex-direction:column;gap:2px;padding:12px 16px}.slot span{flex:none;padding:0}
  .dtitle{padding:16px 16px 12px}
  .panel{padding:18px}
  .drop{padding:28px 18px}
  .scrim{align-items:flex-end;padding:0}
  .dialog{max-width:none;border-radius:28px 28px 0 0;padding:12px 20px 28px}
  .dialog.price{padding:0}
  .grab{display:block}
  .dialog h2{font-size:24px;margin-top:18px}
  .phead{padding:12px 20px 22px}.big0{font-size:52px}.phead h2{font-size:20px}
  .states{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:20px}
  .state{padding:20px}
  .state h2{font-size:22px}
  .banner{margin-bottom:16px}
}

/* emil-design-eng polish */
.btn,.chip,.seg button,.nav,.pack,.x{transition:transform 160ms var(--ease-out),background-color 160ms ease,box-shadow 160ms ease}
.btn:active,.chip:active,.seg button:active,.nav:active,.pack:active,.x:active{transform:scale(0.97)}
:where(a,button,input,textarea,.pack):focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.composer:focus-within{box-shadow:0 0 0 2px var(--purple),0 12px 32px rgba(20,20,20,.06)}
@media (hover:hover) and (pointer:fine){
  .btn.primary:hover{background:#4a1db0}
  .btn.quiet:hover,.btn.white:hover,.chip:hover{background:var(--bg2)}
  .nav:hover{background:var(--card)}
  .seg button:not(.on):hover{color:var(--ink)}
  .pack:not(.on):hover{background:#fff}
}
.credits b,.topbar .credit b{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  .btn,.chip,.seg button,.nav,.pack,.x{transition:background-color 160ms ease}
  .btn:active,.chip:active,.seg button:active,.nav:active,.pack:active,.x:active{transform:none}
  .ring{animation-duration:2.4s}.bar{animation:none}
}


/* from 11-my-jobs.html: the full sidebar and My jobs */

.side .nav .n{margin-left:auto;font-size:13px;color:var(--label);font-variant-numeric:tabular-nums}
.side .nav.sm{min-height:36px;padding:6px 10px;font-size:14px}
.side .nav.sm small{display:none}
.side .more{font-size:14px;color:var(--label);text-decoration:none;padding:8px 10px;border-radius:12px;display:block}
.side .sep{height:1px;background:var(--hair);margin:10px 8px}
.newjob{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--hair);font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;margin:0 2px 6px}
.soon{opacity:.38}
.soon .tagsoon{margin-left:auto;font-size:11px;letter-spacing:.02em;color:var(--label)}
.added{background:var(--mark)}
/* My jobs page (Claude's chat history page) */
.listhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.searchbox{display:flex;align-items:center;gap:10px;height:48px;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1px rgba(20,20,20,.14);padding:0 16px;margin-top:20px}
.searchbox input{border:0;outline:0;background:transparent;font-size:16px;color:var(--ink);flex:1;min-width:0}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.filters .chip{height:36px;cursor:pointer}
.filters .chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.filters .chip b{font-weight:500;font-variant-numeric:tabular-nums;color:inherit;opacity:.7}
.group{font-size:13px;color:var(--label);margin:24px 0 6px}
.jobs{background:var(--card);border:1px solid var(--hair);border-radius:20px;overflow:hidden}
.jrow{display:grid;grid-template-columns:40px minmax(0,2.2fr) minmax(0,1.6fr) 150px 72px;gap:14px;align-items:center;padding:12px 18px;text-decoration:none;color:inherit}
.jrow+.jrow{border-top:1px solid var(--hair)}
.jrow .logo{width:36px;height:36px;font-size:14px}
.jrow b{display:block;font-size:15px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jrow span{font-size:13px;color:var(--label)}
.jrow .who{font-size:14px;color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink)}
.st i{width:8px;height:8px;border-radius:50%}
.jrow .dt{font-size:13px;color:var(--label);text-align:right;font-variant-numeric:tabular-nums}
.pager{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font-size:14px;color:var(--label)}
@media (hover:hover) and (pointer:fine){.jrow:hover{background:#fff}}
.jrow .mob{display:none;font-size:13px;color:var(--label);margin-top:2px}
@media (max-width:900px){
  .jrow{grid-template-columns:36px minmax(0,1fr) auto;gap:12px;padding:12px 14px}
  .jrow .who,.jrow .stcol{display:none}
  .jrow .mob{display:block}
}
.side>*{flex-shrink:0}

/* from 5-result-desktop.html: the email footer key, highlights, subjects, versions and the offer check */
.foot p i{width:14px;height:10px;border-radius:3px;background:var(--mark);display:inline-block}
.hl{transition:background-color 160ms ease;cursor:text}
@media (hover:hover) and (pointer:fine){.hl:hover{background:#d3c8f1}}
/* 16 Oct: subject options, email versions, offer check */
.row.subj{align-items:center}
.row.subj b{flex:1;min-width:0}
.flip{display:flex;align-items:center;gap:4px;flex:none;font-size:13px;color:var(--label);font-variant-numeric:tabular-nums}
.flip button{width:36px;height:36px;border-radius:50%;border:0;background:var(--panel);display:grid;place-items:center;cursor:pointer}
.row.ver{align-items:center}
.vseg{display:flex;gap:4px;padding:4px;background:var(--panel);border-radius:999px}
.vseg button{height:32px;padding:0 14px;border-radius:999px;border:0;background:transparent;font-size:14px;color:var(--label);cursor:pointer}
.vseg button.on{background:var(--card);color:var(--ink);font-weight:500;box-shadow:0 1px 2px rgba(20,20,20,.08)}
.offer{background:var(--card);border:1px solid var(--hair);border-radius:20px;padding:18px 20px}
.offer>.k{font-size:13px;color:var(--label);margin-bottom:4px}
.of{padding:10px 0}
.of+.of{border-top:1px solid var(--hair)}
.of small{display:block;font-size:12px;color:var(--label);margin-bottom:3px}
.of p{font-size:15px;line-height:1.4;color:var(--ink)}
.of p.hl2{display:inline;background:var(--mark);border-radius:4px;padding:1px 3px}
.fits{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:12px;border-top:1px solid var(--hair);font-size:13px;color:var(--ink)}
@media (max-width:900px){.flip button{width:40px;height:40px}.row.ver{flex-wrap:wrap}.row.subj{flex-wrap:wrap;row-gap:4px}.row.subj b{order:3;flex:1 1 100%;font-size:16px;line-height:1.35}.row.subj .flip{margin-left:auto}}
@media (hover:hover) and (pointer:fine){.vseg button:not(.on):hover{color:var(--ink)}.flip button:hover{background:#ddd9d1}}

/* sidebar option A (6-sidebar-colour-a.html): a darker stone panel with a hairline edge */
.side{background:#e2dfd7;border-right:1px solid rgba(20,20,20,.12)}
.nav.on{background:#f3f2ee;box-shadow:0 1px 2px rgba(20,20,20,.06)}
@media (hover:hover) and (pointer:fine){.nav:hover{background:#ebe8e1}}
.meter i{background:#cbc7bd}
.av{background:#cfcbc2}

/* ---- Additions for parts the approved pages don't draw (build 3, 18 Oct 2026). Same tokens. ---- */
[hidden]{display:none!important}
body.locked{overflow:hidden}
/* Sheets and the phone menu float over the page wherever it is scrolled to. */
.scrim.sheet,#drawer-scrim{position:fixed;z-index:20}
.drawer{position:fixed;z-index:21;overflow-y:auto}
.drawer .brand .x{margin-left:auto}
/* The account row opens a small menu: Settings and Sign out. */
.me{position:relative}
.me button.who-btn{display:flex;align-items:center;gap:10px;flex:1;min-width:0;min-height:44px;border:0;background:transparent;font-size:14px;color:var(--ink);cursor:pointer;text-align:left;border-radius:12px;padding:0}
.me button.who-btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct{position:absolute;left:0;right:0;bottom:calc(100% + 6px);background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:6px;box-shadow:0 12px 32px rgba(20,20,20,.12);z-index:3}
.acct a,.acct button{display:flex;align-items:center;width:100%;min-height:44px;padding:0 12px;border:0;background:transparent;border-radius:10px;font-size:15px;color:var(--ink);text-decoration:none;cursor:pointer;text-align:left}
@media (hover:hover) and (pointer:fine){.acct a:hover,.acct button:hover{background:var(--bg2)}}
.newjob .n{display:none}
/* A line that says what went wrong, with the coral dot. */
.err{display:flex;gap:10px;align-items:baseline;font-size:14px;line-height:1.45;color:var(--ink);margin-top:12px}
.err::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--coral);transform:translateY(-1px)}
.ok{display:flex;gap:10px;align-items:baseline;font-size:14px;line-height:1.45;color:var(--ink);margin-top:12px}
.ok::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--mint);transform:translateY(-1px)}
/* Add your CV: pasted text, the file that was read, and the three quick questions. */
.drop{display:block;cursor:pointer}
.drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.drop:focus-within{outline:2px solid var(--purple);outline-offset:3px}
.paste-cv{display:block;width:100%;min-height:200px;margin-top:12px;border-radius:16px;border:1px solid rgba(20,20,20,.16);background:var(--card);padding:14px 16px;font-size:15px;line-height:1.5;color:var(--ink);resize:vertical}
.tick input{position:absolute;opacity:0;width:1px;height:1px}
.tick{position:relative;cursor:pointer}
.tick:focus-within .box{outline:2px solid var(--purple);outline-offset:3px}
.q{display:block;margin-top:16px}
.q span{display:block;font-size:15px;font-weight:500;color:var(--ink);margin-bottom:8px;line-height:1.4}
.qs .hint{margin-top:16px}
.linkbtn{border:0;background:none;padding:0;font:inherit;color:var(--purple);text-decoration:underline;cursor:pointer}
/* New job: the big box (Perplexity's composer, from the approved stylesheet). */
.newbox{max-width:720px;margin:12vh auto 0}
.newbox .display{font-size:44px}
.newbox .lead{text-align:center;margin:12px auto 0}
.composer textarea{min-height:120px}
.crow .under{font-size:13px;color:var(--label);flex:1 1 200px}
/* Working: grey blocks where the person goes until the result lands. */
.ghostline{height:14px;border-radius:7px;background:var(--panel)}
.who .bar.big{height:40px;border-radius:12px;width:min(320px,80%)}
/* The result: the Cc line, the editable letter, the tailored CV card. */
.who .cc-why{font-size:13px;line-height:1.45;color:var(--label);margin-top:10px;max-width:56ch}
.letter[contenteditable]{outline:none}
.letter[contenteditable]:focus{box-shadow:inset 0 0 0 2px var(--mark)}
.letter p{white-space:pre-wrap}
.cvcard .btn{margin-top:14px;width:100%}
.cvcard b{display:block;font-size:15px;font-weight:500;color:var(--ink);margin-top:2px}
.cvcard span{font-size:13px;color:var(--label);line-height:1.4}
.btn.danger{color:var(--ink)}
/* My jobs without the person column, since the list doesn't carry the person. */
.jrow.nowho{grid-template-columns:40px minmax(0,1fr) 150px 72px}
@media (max-width:900px){.jrow.nowho{grid-template-columns:36px minmax(0,1fr) auto}}
.empty{background:var(--card);border:1px solid var(--hair);border-radius:20px;padding:28px 24px;margin-top:20px;font-size:15px;color:var(--body)}
/* Settings */
.setcard{background:var(--card);border:1px solid var(--hair);border-radius:20px;padding:22px 24px;margin-top:20px}
.setcard h2{font-size:22px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.setcard .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
@media (max-width:900px){.newbox{margin-top:24px}.newbox .display{font-size:32px}.setcard{padding:18px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* The sidebar keeps its width whatever the name or address in it. */
.side{width:248px;min-width:0}
.side>*,.me,.me button.who-btn{min-width:0}
/* The phone menu holds the same list as the sidebar, so it gets the sidebar's rules too. */
.drawer>*{flex-shrink:0}
.drawer .nav .n{margin-left:auto;font-size:13px;color:var(--label);font-variant-numeric:tabular-nums}
.drawer .nav.sm{min-height:36px;padding:6px 10px;font-size:14px}
.drawer .more{font-size:14px;color:var(--label);text-decoration:none;padding:8px 10px;border-radius:12px;display:block}
.drawer .sep{height:1px;background:var(--hair);margin:10px 8px}

/* Upwork mode (canvas boards U-P0 to U-D3, 19 Oct 2026) */
.found{flex:none;font-size:12px;font-weight:500;color:var(--mint);background:#e3f1e9;padding:5px 8px;border-radius:999px}
.fl-note{margin-top:10px;font-size:14px;color:var(--label)}
.fl{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.fl[hidden],.fl-note[hidden],.fl-yes[hidden],.field[hidden],.found[hidden]{display:none}
.fl-q{font-size:14px;color:var(--ink)}
.fl-seg{display:inline-flex;flex:none;padding:3px;border-radius:999px;background:var(--panel)}
.fl-seg button{border:0;background:transparent;font-size:13px;font-weight:500;color:var(--label);height:30px;min-width:44px;padding:0 12px;border-radius:999px;cursor:pointer;transition:background-color 160ms ease,color 160ms ease}
.fl-seg button[aria-checked="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(20,20,20,.1)}
.fl-yes{margin-top:8px;font-size:14px;color:var(--label);line-height:1.45}
.jobmark{width:88px;height:88px;border-radius:24px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:15px;font-weight:500;flex:none}
.add{display:inline;padding:2px 6px;border:1.5px dashed #c99a3a;border-radius:8px;background:#fbf5e8;color:#7a5410;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.letter p.drafted{position:relative;padding:28px 14px 12px;border-radius:12px;background:#f1f6fb;box-shadow:inset 3px 0 0 #6a8fb5}
.dtag{position:absolute;top:8px;left:14px;font-size:12px;font-weight:500;color:#3f6489;user-select:none}
.foot .legend{display:flex;flex-direction:column;gap:6px}
.foot p i.dash{background:#fbf5e8;border:1.5px dashed #c99a3a}
.foot p i.drafti{background:#f1f6fb;box-shadow:inset 3px 0 0 #6a8fb5}
.card{background:var(--card);border:1px solid var(--hair);border-radius:20px;padding:18px 20px}
.card .k{font-size:13px;color:var(--label)}
.card p.t{font-size:16px;line-height:1.45;color:var(--ink);margin-top:6px}
.card a{display:inline-block;margin-top:10px;font-size:13px}
.angle .src{font-size:13px;color:#bdb8ae;margin-top:12px;line-height:1.4}
.qa{border-top:1px solid var(--hair);padding:16px 24px 20px}
.qa .k{font-size:13px;color:var(--label)}
.qai{padding:14px 0}
.qai+.qai{border-top:1px solid var(--hair)}
.qai b{display:block;font-size:15px;font-weight:500;color:var(--ink);line-height:1.4}
.qai .needs{display:block;font-size:13px;color:var(--amber);margin-top:4px}
.qai .ans{margin:8px 0;font-size:16px;line-height:1.55;color:var(--ink);outline:none;border-radius:8px}
.qai .ans:focus-visible{box-shadow:0 0 0 2px var(--purple)}
@media (max-width:900px){.jobmark{width:64px;height:64px;border-radius:18px;font-size:13px}.qa{padding:14px 16px 18px}}

/* Brief 8, approved 21 Oct 2026 (canvas board U-P3): the Who's hiring card on an Upwork proposal. */
.whocard .warn{display:flex;gap:12px;align-items:flex-start;margin-top:10px;background:#fbf5e8;border:1px solid #e3c98a;border-radius:14px;padding:14px}
.whocard .warn svg{flex:none;margin-top:1px}
.whocard .warn p{font-size:15px;line-height:1.4;color:#5c3f06}
.whocard .whotick{display:flex;align-items:center;gap:12px;min-height:44px;margin-top:6px;font-size:16px;color:var(--ink);font-weight:500}
.whocard .whotick input{width:22px;height:22px;accent-color:var(--purple);flex:none}
.whocard .rule{height:1px;background:var(--hair);margin:10px 0 14px}
.whocard .person{display:flex;gap:12px;align-items:center}
.whocard .pic{width:48px;height:48px;border-radius:50%;background:#bdb6aa;flex:none;display:grid;place-items:center;font-size:16px;font-weight:500;color:var(--ink)}
.whocard .person b{font-weight:500;color:var(--ink);font-size:17px;display:block}
.whocard .note{font-size:14px;line-height:1.45;color:var(--label)}
.whocard .addr{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgba(47,122,85,.12);border-radius:14px;padding:12px 14px;font-size:15px;color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.whocard .badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;border-radius:999px;padding:4px 9px;background:var(--card);color:var(--ink);flex:none}
.whocard .badge .d{width:8px;height:8px;border-radius:50%}

/* engine-7 (21 Oct 2026): the reading screen, copied from the canvas board "Upwork 5 phone · Reading first".
   Everything is scoped under .rd so no other screen changes. */
.rd{--rd-gap:16px}
.rwrap{max-width:560px;margin:0 auto}
.rd .rtitle{font-size:30px;line-height:1.08;font-weight:500;letter-spacing:-.035em;color:var(--ink);margin:10px 0 14px}
.rd .rchips{margin:0 0 16px;gap:6px}
.rd .rchips .chip{height:auto;padding:6px 11px;border:0;background:var(--panel);font-size:13px;font-weight:500}
.rd .stack{display:flex;flex-direction:column;gap:var(--rd-gap)}
.rd .rfold{margin:16px 0 4px}
/* the client's state, one line in a light panel before the dark card (21 Oct 2026) */
.rd .state{background:var(--panel);color:var(--ink);border-radius:18px;padding:14px 18px;font-size:16px;font-weight:500;line-height:1.4}
.rd .hero-need{background:var(--ink);color:var(--bg);border-radius:28px;padding:24px;display:grid;gap:20px}
.rd .kicker{font-size:13px;font-weight:500;letter-spacing:.01em;opacity:.7;margin-bottom:12px}
.rd .need-text{font-size:24px;font-weight:500;line-height:1.2;letter-spacing:-.025em}
.rd .need-cards{list-style:none;display:grid;gap:8px}
.rd .need-card{display:grid;grid-template-columns:26px 1fr;gap:10px;background:var(--bg);color:var(--ink);border-radius:18px;padding:16px 18px}
.rd .need-card .num{font-size:12px;font-weight:500;color:var(--label);padding-top:3px;font-variant-numeric:tabular-nums}
.rd .need-label{font-size:13px;color:var(--label)}
.rd .need-value{font-size:17px;font-weight:500;color:var(--ink);line-height:1.35;margin-top:2px}
.rd .guess{display:inline-flex;align-items:center;gap:5px;margin:8px 0 2px;padding:3px 9px 3px 7px;border:1px solid currentColor;border-radius:999px;font-size:11.5px;font-weight:500;color:var(--label)}
.rd .rcard{background:var(--card);box-shadow:0 0 0 1px rgba(20,20,20,.08);border-radius:24px;padding:22px}
.rd .rcard h2{font-size:22px;font-weight:500;line-height:1.15;letter-spacing:-.025em;color:var(--ink);margin-bottom:12px}
.rd .card-text{font-size:16px;line-height:1.55;color:var(--body)}
.rd .ph-list{list-style:none;display:grid;gap:8px}
.rd .part{background:var(--bg2);border-radius:16px;padding:14px 16px;margin-top:10px;list-style:none}
.rd .ph-list .part{margin-top:0}
.rd .q{font-size:16px;line-height:1.45;color:var(--ink);font-weight:500}
.rd .why{font-size:15px;line-height:1.45;color:var(--body);margin-top:4px}
.rd .part-k{font-size:13px;font-weight:500;color:var(--label);margin-bottom:4px}
.rd .part.good{background:rgba(47,122,85,.10)}.rd .part.good .part-k{color:#2f6b4c}
.rd .part.win{background:#ece5fb}.rd .part.win .part-k{color:#4a1db0}.rd .part.win .card-text{color:var(--ink)}
.rd .go{position:sticky;bottom:12px;margin-top:20px;background:rgba(250,249,246,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:24px;box-shadow:0 0 0 1px rgba(20,20,20,.08),0 12px 32px rgba(20,20,20,.08);padding:16px;z-index:2}
.rd .btn.big{width:100%;height:56px;font-size:17px}
.rd .go-note{font-size:13px;color:var(--label);text-align:center;margin-top:10px;line-height:1.4}
.rd .go .err{margin-top:10px;text-align:center}
.rd .steps{display:grid;gap:12px;margin-top:4px}
.rd .step{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--ink)}
.rd .step.wait{color:var(--label)}
.rd .step span:not(.ic){display:block;font-size:14px;color:var(--label);margin-top:2px}
.rd .step .ic{width:24px;height:24px;flex:none;display:grid;place-items:center}
.rd .folded{background:var(--ink);color:var(--bg);border-radius:24px;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.rd .folded p{font-size:15px;line-height:1.35}
.rd .folded small{display:block;font-size:12px;opacity:.7;margin-bottom:2px}
.rd .open{font-family:inherit;font-size:14px;font-weight:500;color:var(--ink);background:var(--bg);border:0;border-radius:999px;padding:8px 16px;min-height:36px;flex:none;cursor:pointer}
.rd .fold-body{margin-top:var(--rd-gap)}
/* the loading state: the live breakdown's shining lines */
.rd .rtitle-bar{height:32px;border-radius:10px;width:88%;margin:12px 0 16px}
.rd .bar.pill{display:inline-block;width:84px;height:26px;border-radius:999px;margin:0}
.rd .bar.pill.wide{width:120px}
.rd .bar.dark{background:linear-gradient(90deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.10) 100%);background-size:200% 100%;animation:shine 1.6s ease-in-out infinite;border-radius:8px}
.rd .bar.dark+.bar.dark{margin-top:10px}
.rd .need-card.skel{display:block}
.rd .rload{display:flex;align-items:center;gap:10px;margin-top:18px}
@media (max-width:900px){.rd .rtitle{font-size:30px}.rd .go{bottom:8px}}
@media (min-width:901px){.rd .rtitle{font-size:40px}}
@media (prefers-reduced-motion:reduce){.rd .bar.dark{animation:none}}

.rd .part.good .part-k{color:#8fd3ad}
.rd .part.win .part-k{color:#d9cdfb}
@media (hover:hover) and (pointer:fine){
}

.perk{font-size:13px;line-height:1.4;color:var(--label);margin:6px 4px 10px}
.readcount{font-size:13px;color:var(--label);margin:10px 4px 0}

/* The price sheet scrolls on short phones, so the pay button is always reachable (23 Oct 2026, three packs). */
.scrim.sheet{overflow-y:auto;-webkit-overflow-scrolling:touch}
/* Each pack shows its credits, with the founding bonus as a chip beside them (Favour, 23 Oct 2026: no price per credit). */
.pack .credits{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap;min-width:0}
.pack .credits b{display:inline}
.pack .bonus{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;font-variant-numeric:tabular-nums;background:var(--mark);color:var(--purple-ink);font-size:12px;font-weight:500}
/* "How credits work" is a link in the fine print that opens a small pop-up over the sheet. */
.price .fine .credits-how{font-size:inherit;color:var(--label)}
.howpop{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.55)}
.howpop[hidden]{display:none}
.howbox{max-width:340px;border-radius:16px;background:var(--card);border:1px solid var(--hair);padding:18px 18px 16px;font-size:14px;line-height:1.5}
.howbox h3{margin:0 0 8px;font-size:16px;font-weight:500;color:var(--ink)}
.howbox p{margin:0 0 8px;color:var(--label)}
.howbox .howclose{margin-top:6px;width:100%}

/* The LinkedIn message's how-to-send card (26 Oct 2026): numbered steps, their recent posts to comment on. */
.li-before{margin-top:24px;background:var(--card);border:1px solid var(--hair);border-radius:20px;padding:20px}
.li-before h2{margin:0;font-size:20px;font-weight:500;color:var(--ink)}
.li-steps{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.li-steps li{display:flex;gap:12px}
.li-steps li>div{flex:1;min-width:0}
.li-steps .n{flex:none;width:26px;height:26px;border-radius:13px;background:var(--purple);color:#fff;font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center}
.li-steps b{display:block;margin-top:3px;font-size:16px;font-weight:500;color:var(--ink)}
.li-steps p{margin:6px 0 0;font-size:14px;line-height:1.45;color:var(--label)}
.li-posts{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.li-post{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:12px;background:var(--panel);text-decoration:none}
.li-post span{font-size:14px;line-height:1.4;color:var(--body)}
.li-post small{font-size:12px;color:var(--label)}

/* An example opened from the homepage (26 Oct 2026): the account parts of the menu are hidden, and a bar above the
   result says it is an example and lets the visitor pick a field or move on. */
.guest [data-credits],.guest .me,.guest [data-credit-top],.guest .nav,.guest .lbl,.guest [data-recent],.guest .sep{display:none}
.exbar{display:grid;gap:10px;margin:0 0 20px;padding:0 0 14px;border-bottom:1px solid var(--hair)}
.exhead{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.exlabel{font-size:13px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:var(--label)}
.exhead p{margin:0;font-size:14px;color:var(--label);flex:1 1 auto}
.exnext{border:0;background:none;padding:6px 0;font:inherit;font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.exfields{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.exfields::-webkit-scrollbar{display:none}
.exfields .chip{flex:none;cursor:pointer;font:inherit;font-size:13px;height:30px;padding:0 12px}
.exfields .chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.excta{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 70%,transparent);display:flex;justify-content:center}
.excta .btn{width:100%;max-width:420px;justify-content:center}
body.has-excta .main{padding-bottom:96px}
.chip .info{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:-6px;border-radius:50%;border:1px solid var(--hair);background:var(--bg2);color:var(--ink);font:italic 600 12px/1 Georgia,serif;cursor:pointer;padding:0;position:relative}
.chip .info::after{content:"";position:absolute;inset:-12px}
.chip .info[aria-expanded="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* One focus at a time (canvas "Seeran result screen, one focus per screen", 26 Oct 2026). Pitch, CV and Job behind one
   switcher of equal parts, the selected one filled dark (Apple's segmented control); a lighter outlined switch for the
   email's length, so the two never look like the same control; folded rows for the why and the checks; one action fixed
   at the bottom with its own room, so it never covers text. Four type sizes: 13, 15, 17 and 20. */
.focus{max-width:680px;margin:0 auto}
.segs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;margin:14px 0 4px;border-radius:999px;background:var(--panel);position:sticky;top:8px;z-index:5}
.segs button{height:44px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:15px;color:var(--body);cursor:pointer;transition:background-color 160ms ease,color 160ms ease,transform 160ms var(--ease-out)}
.segs button.on{background:var(--ink);color:var(--bg);font-weight:500}
.segs button:active{transform:scale(.97)}
.segs button:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.pane{padding:18px 0 8px;display:flex;flex-direction:column;gap:16px}
.pane:not([hidden]){animation:panein 180ms var(--ease-out)}
@keyframes panein{from{opacity:0}}
.to{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:13px;color:var(--label)}
.to p{flex:1 1 auto;min-width:0}
.chip.sm{height:28px;padding:0 10px;font-size:13px;gap:6px}
.to .info{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-8px -10px -8px -8px;border:0;background:transparent;color:var(--ink);font:italic 600 13px/1 Georgia,serif;cursor:pointer}
.to .info[aria-expanded="true"]{color:var(--purple)}
.focus .vseg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;padding:3px;background:transparent;box-shadow:inset 0 0 0 1px var(--hair)}
.focus .vseg button{height:44px;font-size:15px}
.subj2{display:flex;align-items:center;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--hair)}
.subj2>div{flex:1;min-width:0}
.subj2 .k span{color:var(--label)}
.subj2 b{display:block;margin-top:4px;font-size:17px;font-weight:500;line-height:1.35;color:var(--ink)}
.round{flex:none;width:44px;height:44px;border:0;border-radius:999px;background:var(--panel);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.round:active{transform:scale(.97)}
.focus .letter{padding:0;font-size:17px;line-height:1.6;color:var(--ink)}
.focus .letter p+p{margin-top:16px}
.focus .letter[contenteditable]:focus{box-shadow:none;outline:2px solid var(--mark);outline-offset:6px;border-radius:4px}
.hl-key,.focus .legend p{font-size:13px;color:var(--label);display:flex;align-items:center;gap:8px;line-height:1.4}
.focus .legend{display:flex;flex-direction:column;gap:6px}
.hl-key i,.focus .legend p i{width:14px;height:10px;border-radius:3px;background:var(--mark);display:inline-block;flex:none}
.focus .legend p i.dash{background:#fbf5e8;border:1.5px dashed #c99a3a}
.frow{border-radius:20px;background:var(--card);box-shadow:0 0 0 1px var(--hair)}
.frow-head{width:100%;min-height:56px;padding:0 16px;border:0;background:transparent;font:inherit;display:flex;align-items:center;gap:8px;text-align:left;color:var(--ink);cursor:pointer}
.frow-head span{flex:1;font-size:15px;font-weight:500}
.frow-head small{font-size:13px;color:var(--label)}
.frow-head svg{flex:none;transition:transform 160ms var(--ease-out)}
.frow-head[aria-expanded="true"] svg{transform:rotate(180deg)}
.frow-body{padding:0 16px 16px;display:flex;flex-direction:column;gap:12px}
.frow-body .angle,.frow-body .card,.frow-body .checks,.frow-body .offer{border-radius:16px}
.frow-body .checks{border:0;padding:0;background:transparent}
.frow-body .checks>.k{display:none}
.fu{display:flex;flex-direction:column;gap:8px;padding-top:4px}
.fu+.fu{border-top:1px solid var(--hair);padding-top:14px}
.fu-text{font-size:15px;line-height:1.55;color:var(--ink)}
.fu-text p+p{margin-top:10px}
.fu .btn,.qai .btn{align-self:flex-start;height:44px}
.focus .qai{display:flex;flex-direction:column;gap:8px}
.inline-act{display:flex}
.gmail{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:var(--ink);text-underline-offset:3px}
.jp{display:flex;flex-direction:column;gap:6px}
.jp-need{font-size:20px;font-weight:500;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.jp-flag{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.45;color:var(--ink)}
.jp-flag svg{flex:none;margin-top:1px}
.jp-rows{display:flex;flex-direction:column}
.jp-rows div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid var(--hair);font-size:15px}
.jp-rows div:last-child{border-bottom:1px solid var(--hair)}
.jp-rows dt{flex:none;color:var(--label)}
.jp-rows dd{text-align:right;color:var(--ink)}
.focus .cvcard{display:flex;flex-direction:column;gap:6px}
.dock{position:sticky;bottom:0;z-index:5;margin:12px -40px -64px;padding:12px 40px calc(16px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--hair)}
.dock .btn{width:100%;max-width:680px;margin:0 auto;height:52px;justify-content:center}
@media (max-width:900px){.dock{margin:12px -16px -48px;padding:12px 16px calc(16px + env(safe-area-inset-bottom))}}
/* Examples: one Field choice in place of the row of small chips, and a full-size Show another (UX review, 26 Oct 2026). */
.exfield{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--label)}
.exfield select{flex:1;min-width:0;height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--hair);background:var(--card);font:inherit;font-size:15px;color:var(--ink)}
.exnext{min-height:44px;padding:0 4px}
@media (prefers-reduced-motion:reduce){.pane:not([hidden]){animation:none}.frow-head svg{transition:none}}
.prog{display:flex;flex-direction:column;gap:8px;margin:2px 0 8px;font-size:13px;color:var(--label)}
.prog-bar{display:block;height:6px;border-radius:999px;background:var(--panel);overflow:hidden}
.prog-bar i{display:block;height:100%;border-radius:999px;background:var(--purple);transition:width 400ms var(--ease-out)}
/* A visible way out of each sheet, for touch (UX review, 26 Oct 2026). */
.dialog{position:relative}
.sheet-x{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;border-radius:999px;background:var(--panel);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.sheet-x:active{transform:scale(.97)}
.cv-sum{font-size:17px;line-height:1.6;color:var(--ink)}
.cv-top{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.5;color:var(--ink)}
/* Inside "Why this works" the angle reads as text, not a second dark card. */
.frow-body .angle{background:transparent;color:var(--ink);padding:0}
.frow-body .angle .k{color:var(--purple)}
.frow-body .angle h2{font-size:17px;line-height:1.45;letter-spacing:0;margin-top:6px}
.frow-body .angle a,.frow-body .card a{color:var(--ink);border-bottom-color:var(--hair);min-height:44px;display:inline-flex;align-items:center}
.frow-body .angle .src{font-size:13px;color:var(--label);margin-top:8px}
/* The button stays at the bottom of the screen even when a part is short. */
.focus{display:flex;flex-direction:column;min-height:calc(100vh - 96px);min-height:calc(100svh - 96px)}
.focus .dock{margin-top:auto}
@media (max-width:900px){.focus{min-height:calc(100vh - 72px);min-height:calc(100svh - 72px)}}
/* First-result tour, copied from Slack's activity feed tour (Favour picked it, 28 Oct 2026). Each card sits in the page
   under (or above) the part it explains, so it stays with that part while the page scrolls. */
.tour-on,.focus .letter[contenteditable].tour-on{outline:3px solid var(--purple);outline-offset:3px}
.focus .letter[contenteditable].tour-on{outline-offset:8px;border-radius:6px}
.tour{position:relative;max-width:420px;margin:14px 0;padding:18px 18px 16px;border-radius:16px;background:#fff;color:var(--body);box-shadow:0 12px 40px rgba(20,20,20,.14),0 0 0 1px var(--hair);animation:tour-in 220ms var(--ease-out)}
.tour::before{content:"";position:absolute;left:40px;width:14px;height:14px;background:#fff;transform:rotate(45deg)}
.tour-after::before{top:-7px;box-shadow:-1px -1px 0 var(--hair)}
.tour-before::before{bottom:-7px;box-shadow:1px 1px 0 var(--hair)}
.tour h3{margin:0 40px 8px 0;font-size:18px;font-weight:500;line-height:1.3;color:var(--ink)}
.tour p{margin:0 0 14px;font-size:16px;line-height:1.5}
.tour-rows{list-style:none;display:grid;gap:10px;margin:0 0 14px}
.tour-rows li{display:grid;grid-template-columns:52px 1fr;gap:8px;font-size:16px;line-height:1.45}
.tour-rows b{font-weight:500;color:var(--ink)}
.tour-x{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--label);display:grid;place-items:center;cursor:pointer}
.tour-x:hover{background:var(--bg)}
.tour-x:focus-visible,.tour .btn:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.tour-ft{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tour-ft span{font-size:14px;color:var(--label)}
@keyframes tour-in{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.tour{animation:none}}

/* Settings and account (28 Oct 2026). Computer: fal's settings, a section list beside one open section.
   Phone: Revolut's account hub (name, two cards, rows), and each row opens its section with a way back. */
.set{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;margin-top:24px}
.set-nav{flex:0 0 200px;display:flex;flex-direction:column;gap:2px;position:sticky;top:24px}
.set-nav a{min-height:40px;display:flex;align-items:center;padding:0 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:15px}
.set-nav a[aria-current]{background:var(--panel);font-weight:500}
.set-lbl{font-size:13px;color:var(--label);padding:14px 12px 6px}
.set-lbl:first-child{padding-top:2px}
.set-body{flex:999 1 480px;min-width:0}
.set-body>section>h2{font-size:28px;font-weight:500;letter-spacing:-.03em;color:var(--ink)}
.set-body>section>.setcard:first-of-type{margin-top:16px}
.set-back{display:none}
.set-hub{display:none}
.setcard.flush{padding:0 24px}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}
.switch-row b{display:block;font-weight:500;font-size:16px;color:var(--ink)}
.switch-row small{display:block;font-size:14px;color:var(--label);margin-top:2px}
.switch-row input{appearance:none;-webkit-appearance:none;flex:none;width:52px;height:32px;border-radius:999px;background:var(--panel);position:relative;cursor:pointer;margin:0;transition:background-color 160ms ease}
.switch-row input::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(20,20,20,.2);transition:transform 200ms var(--ease-out)}
.switch-row input:checked{background:var(--purple)}
.switch-row input:checked::after{transform:translateX(20px)}
.cr-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--card);border:1px solid var(--hair);border-radius:16px;margin-top:16px}
.cr-stats>div{padding:18px;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--hair)}
.cr-stats>div:last-child{border-right:0}
.cr-stats span{font-size:14px;color:var(--label)}
.cr-stats b{font-size:28px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.cr-stats b i{font-style:normal;font-size:15px;font-weight:400;color:var(--label)}
.cr-stats small{font-size:13px;color:var(--label)}
.cr-h{font-size:20px;font-weight:500;color:var(--ink);margin:32px 0 12px}
.cr-perk{font-size:15px;line-height:1.45;color:var(--body);margin:12px 0 0}
.cr-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:16px}
.cr-pack{background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:14px}
.cr-pack.best{border-color:var(--purple);box-shadow:inset 0 0 0 1px var(--purple)}
.cr-pack .nm{display:flex;align-items:center;gap:6px;min-height:22px}
.cr-pack .nm b{font-size:17px;font-weight:500;color:var(--ink)}
.cr-pack .bonus{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:var(--mark);color:var(--purple-ink);font-size:12px;font-weight:500}
.cr-pack .pr{font-size:26px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.cr-pack small{display:block;font-size:14px;color:var(--label);margin-top:2px}
.cr-pack .btn{width:100%}
.pu-row{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--hair)}
.pu-row:last-child{border-bottom:0}
.pu-row .t{flex:1;min-width:0}
.pu-row b{display:block;font-weight:500;font-size:16px;color:var(--ink)}
.pu-row small{display:block;font-size:13px;color:var(--label);margin-top:2px}
.pu-row .amt{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.pu-row a{min-height:44px;display:flex;align-items:center;font-size:14px}
.help-h{font-size:18px;font-weight:500;color:var(--ink);margin-bottom:8px}
.up-mark{width:22px;height:22px;border-radius:6px;background:#14A800;color:#fff;display:grid;place-items:center;flex:none;font-size:11px;font-weight:700;letter-spacing:-.03em}
.linkbtn.plain{color:var(--ink);text-decoration:none;font-size:16px;min-height:48px;text-align:left}
.danger-link{color:var(--coral);text-decoration:none;font-size:16px;min-height:48px;display:flex;align-items:center}
@media (max-width:900px){
  .set-title{display:none}
  .set{display:block;margin-top:8px}
  .set-nav{display:none}
  .set-hub:not([hidden]){display:flex;flex-direction:column;gap:16px}
  .set-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--ink);text-decoration:none;font-size:15px;margin-bottom:4px}
  .hub-me{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 4px;text-align:center}
  .hub-av{width:88px;height:88px;border-radius:50%;background:var(--purple);color:#fff;display:grid;place-items:center;font-size:34px;font-weight:500}
  .hub-me h2{font-size:30px;font-weight:500;letter-spacing:-.03em;color:var(--ink);margin-top:8px;word-break:break-word}
  .hub-me p{font-size:15px;color:var(--label);word-break:break-all}
  .hub-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .hub-card{background:var(--card);border-radius:20px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:150px;text-decoration:none;color:var(--ink)}
  .hub-card.buy{background:var(--purple);color:#fff}
  .hub-card .big{font-size:32px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .hub-card b{display:block;font-weight:500;font-size:16px}
  .hub-card small{display:block;font-size:14px;opacity:.8;margin-top:2px}
  .set-list{background:var(--card);border-radius:20px;padding:4px 16px;display:flex;flex-direction:column}
  .set-row{display:flex;align-items:center;gap:14px;min-height:60px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair)}
  .set-row:last-child{border-bottom:0}
  .set-row .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  .set-row .t>span{font-size:16px}
  .set-row small{font-size:13px;color:var(--label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hub-end{display:flex;flex-direction:column;padding:0 4px}
  .cr-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-stats>div:nth-child(2){border-right:0}
  .cr-stats>div:nth-child(3){grid-column:1/-1;border-top:1px solid var(--hair)}
  .setcard.flush{padding:0 18px}
}

/* The bonus chip and its note (29 Oct 2026). The chip's tap area reaches 44px without changing how it looks. */
.tagtip{position:relative;display:inline-flex}
.tagtip>.tag{position:relative;border:0;cursor:pointer}
.tagtip>.tag::after{content:"";position:absolute;inset:-8px 0}
.tagpop{position:absolute;top:calc(100% + 8px);left:0;width:min(300px,calc(100vw - 32px));z-index:6;background:var(--card);border:1px solid var(--hair);border-radius:14px;padding:14px 16px;box-shadow:0 12px 32px rgba(20,20,20,.12);font-size:14px;line-height:1.45;color:var(--body)}
.tagpop[hidden]{display:none}

/* Deleting a job (30 Oct 2026): a bin at the end of each job, shown on hover on a computer and always on a phone. */
.jline{position:relative}
.jdel{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:10px;background:transparent;color:var(--label);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .15s ease}
.jline:hover .jdel,.jdel:focus-visible{opacity:1}
.jdel:hover{background:rgba(20,20,20,.07);color:var(--ink)}
.jdel:active{transform:translateY(-50%) scale(.94)}
.jdel-t{display:none}
@media (hover:hover){.jline .nav.sm{padding-right:40px}.jline .jrow{padding-right:56px}}
/* On a phone the bin hides behind the row, and a swipe left shows a red Delete, as in Mail (Favour, 30 Oct 2026). */
@media (hover:none){
  .jline{overflow:hidden;--row-bg:var(--card)}
  .drawer .jline,.side .jline{--row-bg:var(--bg2)}
  .jline>a{position:relative;z-index:1;background:var(--row-bg);transition:transform .22s cubic-bezier(.2,.8,.2,1);touch-action:pan-y}
  .jline.dragging>a{transition:none}
  .jdel{opacity:1;top:0;bottom:0;right:0;width:88px;height:auto;transform:none;border-radius:0;background:#c8412c;color:#fff;font-size:15px;font-weight:500}
  .jdel:hover{background:#c8412c;color:#fff}
  .jdel:active{transform:none;background:#a9341f}
  .jdel svg{display:none}
  .jdel-t{display:inline}
  .jline:not(.open):not(.dragging) .jdel{visibility:hidden}
}
/* The job's ⋯ menu (30 Oct 2026): top right of an open job on a computer, in the top bar on a phone. */
.wrap{position:relative}
.jobmenu{position:relative}
.jobmenu.desk{position:absolute;top:-8px;right:0;z-index:3}
.jobmenu.phone{margin-left:4px}
.jm-btn{width:40px;height:40px;border:0;border-radius:12px;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.jm-btn:hover{background:rgba(20,20,20,.07)}
.jm-menu{position:absolute;left:auto;right:0;top:44px;bottom:auto;min-width:180px;z-index:5}
.jm-menu .jm-del{width:100%;min-height:44px;border:0;background:transparent;text-align:left;padding:0 14px;font-size:15px;color:#b3321d;cursor:pointer;border-radius:10px}
.jm-menu .jm-del:hover{background:rgba(179,50,29,.08)}
@media (max-width:900px){.jobmenu.desk{display:none}}
@media (min-width:901px){.jobmenu.phone{display:none}}
.jobmenu[hidden]{display:none}
/* Collapsing the sidebar to its icons (30 Oct 2026), after fal's sidebar. Phones keep the slide-out menu. */
.sidetog{margin-left:auto;width:32px;height:32px;border:0;border-radius:10px;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none}
.sidetog:hover{background:rgba(20,20,20,.07)}
.side-min .side{flex-basis:64px;padding-left:8px;padding-right:8px}
.side-min .side .brand{justify-content:center;padding-left:0;padding-right:0}
.side-min .side .brand .mk,.side-min .side .brand b{display:none}
.side-min .side .sidetog{margin:0}
.side-min .side .newjob,.side-min .side .nav{font-size:0;gap:0;justify-content:center;padding-left:0;padding-right:0}
.side-min .side .nav .n,.side-min .side .lbl,.side-min .side [data-recent],.side-min .side .more,.side-min .side .credits,.side-min .side [data-name]{display:none}
.side-min .side .me{padding-left:0;padding-right:0;justify-content:center}
.side-min .side .me button.who-btn{flex:none;justify-content:center}