/* ============================================================
   Lumitype — ds.css
   Single source of truth for design tokens + chip/tag components.
   Loaded AFTER each page's inline styles, so these definitions win.
   Change a token here, it changes everywhere.
   ============================================================ */

:root{
  /* color roles */
  --ds-accent:#6f9eea;            /* BLUE — the accent color (actions, progress, highlights) */
  --ds-accent-ink:#0b3b56;        /* text on blue tint */
  --ds-accent-bg:rgba(149,190,230,.22);
  --ds-success:#64CEAE;           /* MINT — success / positive only (strong fit, applied) */
  --ds-success-ink:#06281f;
  --ds-success-bg:rgba(100,206,174,.20);
  --ds-warn-ink:#854d0e;
  --ds-warn-bg:rgba(234,179,8,.20);
  --ds-ink:#171717;
  --ds-body:#41414a;
  --ds-mut:#9a9aa4;
  /* Hairline. Was used by five rules here and never defined, so every border that
     referenced it was an invalid declaration and simply did not draw. */
  --ds-line:rgba(120,120,140,.16);
  /* radius scale — nothing outside this scale */
  --ds-r-control:9px;             /* buttons, inputs, small chips (app) */
  --ds-r-card:14px;               /* cards */
  --ds-r-shell:16px;              /* drawers, modals, shells */
  --ds-r-pill:999px;              /* pills; public-site buttons */
}

/* ---- Tag / chip system (see DESIGN-SYSTEM.md) ---- */
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tag{font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:700;
  padding:9px 14px;border-radius:var(--ds-r-control);border:none;line-height:1;
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(120,120,140,.10);color:var(--ds-body)}
.tag.type{padding:9px 14px;background:var(--ds-accent-bg);color:var(--ds-accent-ink)}    /* worktype — blue */
.tag.set{padding:9px 14px;background:var(--ds-success-bg);color:var(--ds-success-ink)}   /* format — mint */
.tag.urgent,.qm{padding:9px 14px;border-radius:var(--ds-r-control);background:var(--ds-warn-bg);color:var(--ds-warn-ink);
  font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:700;line-height:1;display:inline-flex;align-items:center;gap:5px}
.tag.skill{padding:9px 14px;background:rgba(120,120,140,.10);color:var(--ds-body)}       /* neutral keyword */
.tag .lvl{margin-left:5px;color:var(--ds-mut);font-weight:600;text-transform:none;letter-spacing:.2px}

/* ---- Fact tile: THE layout for every fact on a job ----
   A label and its value. Two kinds, and the difference is not cosmetic:
   - a PROSE value is not editable here at all: the tile opens Talk to Lumy, because
     meaning is shaped in conversation, never typed into a form;
   - a value from a CONTROLLED LIST stays a select, because there is nothing to write
     and free text there would break matching. */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fgrid .full{grid-column:1/-1}
@media(max-width:600px){.fgrid{grid-template-columns:1fr}}
.ftile{border:1px solid var(--ds-line);border-radius:10px;padding:15px 16px;background:#fff;position:relative}
.ftile .fl{font-size:11px;letter-spacing:.3px;text-transform:uppercase;color:var(--ds-mut);font-weight:700;margin-bottom:6px}
.ftile .tv{font-size:15px;color:var(--ds-ink);line-height:1.45;word-break:break-word}
.ftile .tv.empty{color:var(--ds-mut)}
.ftile input,.ftile select{border:none;background:none;width:100%;font-family:inherit;font-size:15px;
  color:var(--ds-ink);outline:none;padding:0;margin:0}
/* strip the native chrome, then draw our own caret - same treatment as the status control */
.ftile select{cursor:pointer;-webkit-appearance:none;appearance:none;padding-right:20px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9aa4' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 0 center;background-size:14px}
.ftile:focus-within{border-color:#9aa3af}
.ftile.tl-edit{cursor:pointer;transition:border-color .12s,box-shadow .12s}
.ftile.tl-edit:hover,.ftile.tl-edit:focus-visible{border-color:#9aa3af;box-shadow:0 2px 10px rgba(16,24,40,.05);outline:none}
.ftile.tl-edit:after{content:"Talk to Lumy";position:absolute;top:13px;right:14px;font-size:10px;font-weight:800;
  letter-spacing:.4px;text-transform:uppercase;color:var(--ds-accent);opacity:0;transition:opacity .12s}
.ftile.tl-edit:hover:after,.ftile.tl-edit:focus-visible:after{opacity:1}

/* ---- Segmented tabs (canonical, from the dashboard mockups) ---- */
/* What you DO with a job sits on its own line, between the header and the tabs -
   an action never competes with the title for the top-right corner. */
.jvacts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:16px 0 6px}
/* Destructive variant of the standard edit button: quiet until you reach for it.
   Deleting has to be easy to find and hard to do by accident. */
/* The job card's right column: the state, and under it what you do about it. */
.jc-main{flex:1;min-width:0}
.jc-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.jc-sideacts{display:flex;align-items:center;gap:6px}
.editbtn.danger{color:#9a9aa4;padding:8px 10px}
.editbtn.danger:hover{color:#c0392b;border-color:rgba(192,57,43,.35);background:rgba(192,57,43,.06)}
.editbtn.danger:focus-visible{outline:2px solid rgba(192,57,43,.5);outline-offset:1px}
.jvtabs{display:flex;gap:4px;background:#f2f3f5;border-radius:10px;padding:4px;margin-bottom:16px}
.jvtab{flex:1;border:none;background:none;font-family:inherit;font-size:13.5px;font-weight:700;color:#8a8d96;padding:9px 10px;border-radius:8px;cursor:pointer;transition:.12s;white-space:nowrap}
.jvtab.on{background:#fff;color:#171717;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.jv-hide{display:none}
.jvtab .yj-n{display:inline-block;min-width:18px;font-size:11px;font-weight:800;background:rgba(111,158,234,.18);color:#3f5f9e;border-radius:999px;padding:2px 6px;margin-left:4px}

/* ---- Applicant/relationship card grid (2-3 columns, canonical) ---- */
.apfeed{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.apfeed .conn-card{margin:0}

/* ---- Verified fit chip (ONE look everywhere: public board + logged dashboard) ---- */
.fitchip{font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:700;
  padding:9px 14px;border-radius:var(--ds-r-control);border:none;line-height:1;
  display:inline-flex;align-items:center;gap:5px;margin-left:auto;flex-shrink:0;
  background:rgba(120,120,140,.10);color:var(--ds-body)}
.fitchip.good{background:var(--ds-success-bg);color:var(--ds-success-ink)}

/* ---- Group label inside a list (skills grouped by area = the portfolio career) ---- */
.lgroup{font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--ds-mut);
  font-weight:800;margin:14px 0 6px}
.lgroup:first-child{margin-top:0}

/* ---- Portfolio career: cards use the canonical .conn-card in the .apfeed grid ---- */

/* ---- Jobs listed inside a company card (one row per gig: pay, dates, scope) ---- */
.joblist{display:flex;flex-direction:column}
.joblist .jrow{padding:12px 0;border-top:1px solid var(--ds-line)}
.joblist .jrow:first-child{border-top:none;padding-top:6px}
.joblist .jr-t{font-size:14.5px;font-weight:700}
.joblist .jr-m{font-size:12.5px;color:var(--ds-mut);font-weight:600;margin-top:2px}
.joblist .jr-s{font-size:13.5px;color:var(--ds-body);margin-top:5px;line-height:1.45}
.joblist .jr-a{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.payedit{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:4px}
.payedit .pe-cur{font-weight:700;color:var(--ds-mut)}
.payedit input,.payedit select{border:1px solid var(--ds-line);border-radius:var(--ds-r-control);
  padding:8px 10px;font-family:inherit;font-size:13.5px;outline:none;background:#fff}
.payedit .pe-amt{width:90px}

/* ---- Income forecast: the months ahead ---- */
.fcast{display:flex;gap:10px;align-items:flex-end;overflow-x:auto;padding-top:6px}
.fcast .fc-col{flex:1;min-width:64px;text-align:center}
.fcast .fc-bar{position:relative;display:flex;align-items:flex-end;justify-content:center;
  background:#f2f3f5;border-radius:8px;overflow:hidden}
.fcast .fc-fill{width:100%;background:#c9d7ef;border-radius:8px 8px 0 0}
.fcast .fc-fill[data-ok]{background:rgba(100,206,174,.75)}
.fcast .fc-goal{position:absolute;left:0;right:0;height:2px;background:#6f9eea;opacity:.7}
.fcast .fc-v{font-size:12.5px;font-weight:700;margin-top:7px}
.fcast .fc-l{font-size:11px;color:var(--ds-mut);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.fcast .fc-n{font-size:10.5px;color:var(--ds-mut);margin-top:3px;line-height:1.3}

/* ---- Stage by stage: one card per paid stage, its deliverable and its slice ----
   This used to be a row list here while job.html (the only consumer) styled it as a
   card. ds.css wins, so the page rendered the intersection of the two: a card radius
   and white background with no border and no side padding, and steps indented twice.
   The card design below is the one that was intended; the row version is gone. */
.stg{border:1px solid var(--ds-line);border-radius:12px;padding:16px 18px;margin-bottom:10px;background:#fff}
.stg-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.stg-n{font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;font-weight:800;color:#3f5f9e;
  background:rgba(149,190,230,.22);border-radius:6px;padding:5px 9px}
.stg-pay{font-size:17px;font-weight:700;letter-spacing:-.3px}
.stg-t{font-size:17px;font-weight:600;line-height:1.35;margin-bottom:8px}
.stg-d{font-size:14px;color:var(--ds-body);line-height:1.5;margin-top:12px;padding-top:10px;border-top:1px solid var(--ds-line)}
.stg-d span{display:block;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--ds-mut);font-weight:700;margin-bottom:4px}
.stg-s{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.stg-s li{position:relative;padding-left:24px;font-size:14px;line-height:1.45;color:var(--ds-body)}
.stg-s li:before{content:"";position:absolute;left:0;top:2px;width:14px;height:14px;
  border:1.5px solid var(--ds-line);border-radius:4px;background:#fff}

/* ---- Card description (slot 5 of the job card) --------------------------------
   It is an EXCERPT, never the whole scope. A rich job wrote fourteen lines into a
   card while its neighbours wrote two, and the row stopped reading as a row.
   Three lines, clamped - the full text lives on the job page, which is where
   someone actually decides. Enforced here so no screen has to remember. */
.bd-desc, .jc-desc, .conn-d.excerpt{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden; text-overflow:ellipsis;
}

/* ---- Experience entry (the evidence) -----------------------------------------
   What convinces someone hiring is not a job title: it is WHERE the person worked
   and WHAT CAME OUT of it. So the employer leads, the period sits beside it, the
   craft that matches THIS job is tagged, and the result gets a full line at
   readable size - it used to be grey six-point text trailing the role, which is
   exactly where nobody reads. */
.xpr{padding:12px 0;border-top:1px solid var(--ds-line)}
.xpr:first-child{border-top:none}
.xpr .xh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.xpr .xco{font-weight:700;font-size:14.5px;color:var(--ds-ink)}
.xpr .xwhen{font-size:12.5px;color:var(--ds-mut);font-variant-numeric:tabular-nums}
.xpr .xrole{font-size:13.5px;color:var(--ds-body);margin-top:2px}
.xpr .xd{font-size:14px;color:var(--ds-body);line-height:1.55;margin-top:6px}
.xpr .xnums{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.xpr .xnum{font-size:12px;font-weight:700;color:#0b3b56;background:rgba(149,190,230,.22);
  border-radius:9px;padding:4px 9px;font-variant-numeric:tabular-nums}

/* ---- Reading a person against a job -------------------------------------------
   The verdict is a verdict: it gets weight, colour and the reason beside it, instead
   of hiding as the first of several identical grey chips. Sentences are sentences -
   a chip holds a word or two, never a clause. And the checks sit in a grid so the
   mark is against its own label, not across an empty column from it. */
.verdict{border-radius:14px;padding:14px 16px;display:flex;gap:14px;align-items:flex-start;
  border:1px solid var(--ds-line);background:var(--ds-surface,#fff)}
.verdict .vn{font-size:26px;font-weight:650;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;flex:none}
.verdict .vt{font-size:15px;font-weight:650;letter-spacing:-.01em;line-height:1.25}
.verdict .vw{font-size:13.5px;line-height:1.5;margin-top:3px;color:var(--ds-body)}
.verdict.ok{background:rgba(100,206,174,.12);border-color:rgba(100,206,174,.4)}
.verdict.ok .vn,.verdict.ok .vt{color:#0a6b4b}
.verdict.ask{background:rgba(234,179,8,.12);border-color:rgba(234,179,8,.38)}
.verdict.ask .vn,.verdict.ask .vt{color:#7a5200}
.verdict.out{background:rgba(192,57,43,.09);border-color:rgba(192,57,43,.3)}
.verdict.out .vn,.verdict.out .vt{color:#96271c}

.psec{margin-top:20px}
.psec > h4{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ds-mut);
  font-weight:700;margin:0 0 10px;padding-bottom:7px;border-bottom:1px solid var(--ds-line)}
.pquote{font-size:14.5px;line-height:1.55;color:var(--ds-body);margin:0}

.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:6px 18px}
.chk{display:flex;gap:8px;align-items:baseline;font-size:13.5px;line-height:1.45;color:var(--ds-body)}
.chk .m{flex:none;width:14px;text-align:center;font-weight:800}
.chk.pass .m{color:#0a7d55}
.chk.fail .m{color:#c0392b}
.chk.unknown .m{color:#9a6b00}
.chk.fail .t{color:#96271c}
.chk .must{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ds-mut);
  font-weight:700;margin-left:5px}
/* Must-have and nice-to-have are different decisions, so they are different blocks:
   a question mark on something that eliminates is a call to make; seven of them on
   things that only rank is noise, and mixed together the noise hides the call. */
.csub{font-size:13px;font-weight:700;color:var(--ds-ink);margin:0 0 7px;display:flex;
  align-items:baseline;gap:8px;flex-wrap:wrap}
.csub .cnote{font-size:11.5px;font-weight:600;color:var(--ds-mut);letter-spacing:0;text-transform:none}

/* VALOR ESTIMADO. Numa vaga que a Lumitype transcreveu de um anuncio sem preco, o
   numero e calculo de mercado - e a pessoa organiza a vida em cima dele. O aviso
   anda colado no valor, em toda tela onde o valor aparece. */
.estf{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:#B26B16;background:rgba(178,107,22,.12);border-radius:5px;padding:2px 6px;margin-left:7px;vertical-align:2px}

/* De quem sao as palavras numa vaga transcrita. Discreta, mas antes de tudo o
   que a pessoa vai ler - e com o link do original, que e a prova. */
.srcnote{font-size:12.5px;line-height:1.5;color:#8a8a94;background:rgba(120,120,140,.07);
  border:1px solid rgba(120,120,140,.14);border-radius:10px;padding:9px 12px;margin:0 0 16px}
.srcnote a{color:inherit;font-weight:700}