/* ============================================================
   CAREER DETAIL — /careers/{slug}

   These are the pages the site exists for: 356 of them, each the
   thing a reader actually came to read. The old layout stacked ten
   identical white panels in one column, so a roadmap, a salary table
   and a warning about the job all looked the same and the page read
   as one long undifferentiated block.

   What changes here:

     A DARK MASTHEAD, matching /careers, so the directory and the
     page it leads to feel like one product.

     A STICKY CONTENTS RAIL. A page with ten sections needs one, and
     it is the single biggest difference between a page and a
     reference document.

     HIERARCHY. Prose sections read as prose - measured line length,
     no card around them, numbered. Data blocks (courses, exams,
     salary, roadmap) are cards, because they are tables of things.

     THE HONEST SECTIONS LOOK DIFFERENT. "The reality of the job",
     "What people get wrong" and "Challenges" get an amber panel.
     That is not decoration: on this site those sections are the
     reason to trust the rest, and they should not be skimmable at
     the same speed as an overview.

   Loads alongside detail-theme.css, which keeps .icg-rich and the
   breadcrumb. Everything here is scoped under .cd.
   ============================================================ */

.cd{ --cd-radius:14px; --cd-shadow:19,27,46; }
.cd *{box-sizing:border-box}

/* ---------------- masthead ---------------- */
.cd-hero{
  position:relative;overflow:hidden;color:#eef1f7;
  background:
    radial-gradient(115% 130% at 88% -14%, rgba(239,139,0,.26), rgba(239,139,0,0) 55%),
    radial-gradient(95% 120% at 6% 112%, rgba(27,63,196,.34), rgba(27,63,196,0) 60%),
    linear-gradient(155deg, #1b2540, #0d1322 68%);
  padding:44px 0 40px;
}
.cd-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:26px 26px;
}
.cd-hero-in{position:relative;z-index:1}
.cd-kicker{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px}
.cd-kicker a{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  color:rgba(238,241,247,.82);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:4px 12px;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.cd-kicker a i{width:7px;height:7px;border-radius:2px;background:var(--d,#f0b45f);flex:0 0 auto}
.cd-kicker a:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff}
.cd-kicker .cd-code{
  font-family:var(--f-data);font-size:10.5px;font-weight:600;letter-spacing:.09em;
  color:#f0b45f;background:rgba(240,180,95,.12);border:1px solid rgba(240,180,95,.28);
  border-radius:6px;padding:3px 9px;
}
.cd-hero h1{
  margin:0;font-family:var(--f-display);font-weight:800;
  font-size:clamp(30px,4.2vw,50px);line-height:1.04;letter-spacing:-.035em;
  color:#fbfaf7;max-width:18ch;text-wrap:balance;
}
.cd-lede{margin:16px 0 0;max-width:56ch;font-size:16px;line-height:1.62;color:rgba(238,241,247,.74)}

/* The four working facts, as a ledger rather than a boxed panel. */
.cd-facts{
  display:flex;flex-wrap:wrap;margin:28px 0 0;padding:20px 0 0;
  border-top:1px solid rgba(255,255,255,.14);
}
.cd-facts > div{padding-right:30px;margin-right:30px;border-right:1px solid rgba(255,255,255,.13);min-width:0}
.cd-facts > div:last-child{border-right:0;margin-right:0;padding-right:0}
.cd-facts dt{
  margin:0;font-family:var(--f-data);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(238,241,247,.5);
}
.cd-facts dd{margin:7px 0 0;font-size:14.5px;font-weight:600;color:#fbfaf7;line-height:1.35}

.cd-actions{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0}
.cd-btn{
  display:inline-flex;align-items:center;gap:9px;border-radius:10px;padding:11px 18px;
  font-size:14px;font-weight:600;transition:background .16s ease,border-color .16s ease;
}
.cd-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.cd-btn--solid{background:var(--saffron);color:#fff}
.cd-btn--solid:hover{filter:brightness(1.06)}
.cd-btn--ghost{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);color:#eef1f7}
.cd-btn--ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34)}

/* ---------------- layout ---------------- */
.cd-grid{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:40px;align-items:start}
.cd-main{min-width:0;display:grid;gap:34px}
.cd-side{position:sticky;top:calc(var(--icg-head-h,96px) + 16px);display:grid;gap:14px}

/* ---------------- contents rail ---------------- */
.cd-toc{
  background:var(--card);border:1px solid var(--line);border-radius:var(--cd-radius);
  padding:16px 16px 12px;--h:27,63,196;
}
.cd-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:1px;counter-reset:toc}
.cd-toc a{
  display:flex;gap:10px;align-items:baseline;padding:7px 8px;border-radius:8px;
  font-size:13.5px;line-height:1.4;color:var(--ink-2);
  transition:background .14s ease,color .14s ease;
}
.cd-toc a::before{
  counter-increment:toc;content:counter(toc,decimal-leading-zero);
  font-family:var(--f-data);font-size:10px;color:var(--faint);flex:0 0 auto;
}
.cd-toc a:hover{background:var(--paper);color:var(--ink)}
.cd-toc a.is-here{background:var(--blue-soft);color:var(--blue);font-weight:600}
.cd-toc a.is-here::before{color:var(--blue)}

/* ---------------- sections ---------------- */
/* Prose is not boxed. A card around body text shortens the measure and makes
   reading worse; the numbered rule does the separating instead. */
.cd-sec{scroll-margin-top:calc(var(--icg-head-h,96px) + 20px)}
.cd-sec-head{display:flex;align-items:baseline;gap:14px;margin:0 0 16px}
.cd-sec-no{
  font-family:var(--f-data);font-size:11px;font-weight:600;color:var(--faint);
  flex:0 0 auto;padding-top:6px;
}
.cd-sec-head h2{
  margin:0;font-family:var(--f-display);font-size:clamp(20px,2.1vw,26px);
  font-weight:800;letter-spacing:-.03em;line-height:1.18;
}
.cd-sec-head p{
  margin:5px 0 0;font-family:var(--f-data);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);
}
/* Reading typography. 15px at 1.75 was a UI size doing a body-text job. These
   pages are read, sometimes for several minutes, so the prose gets a size and a
   measure chosen for that: ~68 characters a line, which is where comprehension
   stops falling off. Only inside .cd-prose - it must not reach the cards. */
.cd-prose{max-width:68ch}
.cd-prose.icg-rich{font-size:16.5px;line-height:1.78;color:#39414f}
.cd-prose.icg-rich p{margin:0 0 18px}
.cd-prose.icg-rich p:last-child{margin-bottom:0}
.cd-prose.icg-rich ul,.cd-prose.icg-rich ol{margin:0 0 18px;gap:9px}
.cd-prose.icg-rich li{padding-left:2px}
.cd-prose.icg-rich b,.cd-prose.icg-rich strong{color:var(--ink);font-weight:600}
/* The first paragraph of the overview carries a little more weight, so the page
   opens with a lede rather than dropping straight into body copy. */
#overview .cd-prose.icg-rich > p:first-child{font-size:18px;line-height:1.65;color:var(--ink-2)}

/* A heading you can link to. Reference pages get forwarded and quoted; a section
   that cannot be pointed at is harder to share than it needs to be. */
.cd-anchor{
  margin-left:10px;font-family:var(--f-data);font-size:.62em;font-weight:500;
  color:var(--faint);opacity:0;transition:opacity .14s ease,color .14s ease;
}
.cd-sec-head:hover .cd-anchor{opacity:1}
.cd-anchor:hover,.cd-anchor:focus-visible{color:var(--blue);opacity:1}

/* The honest sections. Amber, bordered, unmissable. */
.cd-sec--frank .cd-prose{
  background:#fdf8ef;border:1px solid rgba(180,83,9,.2);border-left:3px solid #b45309;
  border-radius:12px;padding:20px 22px;max-width:46rem;
}
.cd-sec--frank .cd-sec-head p{color:#8a5a12}

/* ---------------- data cards ---------------- */
.cd-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--cd-radius);
  padding:22px 24px;
}
.cd-rows{display:grid;gap:1px}
.cd-row{
  display:flex;align-items:center;gap:14px;padding:13px 2px;
  border-bottom:1px solid var(--line-2);transition:background .14s ease;
}
.cd-row:last-child{border-bottom:0}
.cd-row:hover{background:var(--paper)}
.cd-row b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.cd-row small{
  display:block;margin-top:3px;font-family:var(--f-data);font-size:10.5px;
  letter-spacing:.04em;color:var(--muted);
}
.cd-row .cd-flag{
  margin-left:auto;flex:0 0 auto;font-family:var(--f-data);font-size:10px;letter-spacing:.05em;
  border-radius:20px;padding:3px 9px;white-space:nowrap;
}
.cd-flag--key{color:var(--verify);background:#eff8f3;border:1px solid rgba(14,138,95,.24)}
.cd-flag--alt{color:var(--muted);background:var(--paper);border:1px solid var(--line)}
.cd-row svg{width:14px;height:14px;flex:0 0 auto;color:var(--blue);
  fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .18s ease}
a.cd-row:hover svg{transform:translateX(3px)}

/* ---------------- roadmap as a timeline ----------------

   Three columns: when it happens, the spine, and what happens. Putting the
   duration in its own left column is what turns a numbered list into a
   timeline - the eye can read the time axis on its own without parsing
   sentences, which is the whole reason to draw this as a diagram.

   The spine runs from the field's colour at the top to a hairline at the
   bottom, so the direction of travel is visible before anything is read, and
   it ends on a filled marker: the career itself. A route needs a destination
   drawn on it or it is just a list of steps. */
.cd-road{margin:0;padding:0;list-style:none;counter-reset:none}
.cd-step{
  position:relative;display:grid;
  grid-template-columns:92px 36px minmax(0,1fr);
  gap:0 18px;padding:0 0 26px;
}
.cd-step:last-child{padding-bottom:0}

/* The spine. Drawn on the step rather than the container so the gradient
   segments follow the steps and the last one can stop cleanly. */
.cd-step:not(:last-child)::before{
  content:"";position:absolute;left:110px;top:36px;bottom:-2px;width:2px;border-radius:2px;
  background:linear-gradient(rgba(var(--dr,120,113,108),.55), rgba(var(--dr,120,113,108),.18));
}
.cd-step:last-of-type:not(.cd-step--end)::before{display:none}

.cd-when{
  text-align:right;padding-top:9px;
  font-family:var(--f-data);font-size:11px;font-variant-numeric:tabular-nums;
  color:var(--muted);line-height:1.4;
}
.cd-when em{
  display:block;font-style:normal;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-top:3px;
}

.cd-mark{
  position:relative;z-index:1;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--card);border:2px solid rgba(var(--dr,120,113,108),.45);
  font-family:var(--f-data);font-size:11px;font-weight:600;color:var(--d,var(--ink-2));
  transition:border-color .16s ease,box-shadow .16s ease;
}
.cd-step.is-optional .cd-mark{border-style:dashed;border-color:var(--line);color:var(--muted)}
.cd-step:hover .cd-mark{
  border-color:var(--d,var(--ink));
  box-shadow:0 0 0 4px rgba(var(--dr,120,113,108),.1);
}

.cd-step-body{
  padding:7px 0 0;min-width:0;
  transition:transform .16s ease;
}
.cd-step:hover .cd-step-body{transform:translateX(2px)}
.cd-step-body b{
  font-size:15.5px;font-weight:700;letter-spacing:-.018em;color:var(--ink);
  display:inline-block;vertical-align:middle;
}
.cd-opt{
  display:inline-block;vertical-align:middle;margin-left:9px;
  font-family:var(--f-data);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:var(--paper);border:1px solid var(--line);
  border-radius:20px;padding:2px 8px;
}
.cd-step-body p{margin:8px 0 0;font-size:14.5px;line-height:1.62;color:var(--ink-2);max-width:42rem}

/* The destination. Filled, no number, and the only marker with a mark in it. */
.cd-step--end .cd-mark{
  background:var(--d,var(--ink));border-color:var(--d,var(--ink));color:#fff;
}
.cd-step--end .cd-mark svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cd-step--end .cd-step-body b{color:var(--d,var(--ink))}
.cd-step--end .cd-when em{color:var(--d,var(--muted))}

@media (max-width:640px){
  /* The time column stops earning its width; it moves above the title. */
  .cd-step{grid-template-columns:36px minmax(0,1fr);gap:0 14px}
  .cd-step:not(:last-child)::before{left:17px}
  .cd-when{
    grid-column:2;text-align:left;padding:0 0 4px;order:-1;
    display:flex;gap:8px;align-items:baseline;
  }
  .cd-when em{margin:0}
  .cd-step-body{grid-column:2;padding-top:0}
  .cd-mark{grid-row:1 / span 2}
}

/* ---------------- eligibility and salary tables ---------------- */
.cd-table{width:100%;border-collapse:collapse;font-size:14px}
.cd-table th{
  text-align:left;padding:0 14px 9px 0;border-bottom:1px solid var(--line);
  font-family:var(--f-data);font-size:9.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.cd-table td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line-2);vertical-align:top;color:var(--ink-2)}
.cd-table tr:last-child td{border-bottom:0}
.cd-table td b{color:var(--ink);font-weight:600}
.cd-table .cd-num{font-family:var(--f-data);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}

.cd-caution{
  display:flex;gap:12px;margin:18px 0 0;padding:14px 16px;
  background:#fdf8ef;border:1px solid rgba(180,83,9,.2);border-radius:11px;
  font-size:13px;line-height:1.6;color:var(--ink-2);
}
.cd-caution b{color:#8a5a12;font-weight:600}
.cd-caution svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px;color:#b45309;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------------- role tiles ---------------- */
.cd-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cd-tile{
  background:var(--paper);border:1px solid var(--line-2);border-radius:11px;padding:15px 16px;
}
.cd-tile b{display:block;font-size:14px;font-weight:600;letter-spacing:-.012em}
.cd-tile small{
  display:block;margin-top:3px;font-family:var(--f-data);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.cd-tile p{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2)}

/* ---------------- sidebar cards ----------------

   Four cards doing four different jobs, previously identical. Each now carries an
   icon in its own hue, following the rule the directory and the page body already
   use - one colour per kind of information, so a reader learns it once:

       navigation   blue      where you are
       capability   green     the same --verify used for essential skills
       affinity     violet    what you are drawn to
       measurement  amber     the same amber as the honest sections

   Icons are inline SVG rather than emoji. Emoji render differently on every
   platform and at a size and weight nobody controls, which is exactly wrong beside
   Archivo and IBM Plex Mono. */
.cd-side-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--cd-radius);padding:18px;
}
.cd-card-head{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.cd-ico{
  width:28px;height:28px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(var(--h,120,113,108),.1);
  border:1px solid rgba(var(--h,120,113,108),.2);
}
.cd-ico svg{
  width:15px;height:15px;fill:none;stroke:rgb(var(--h,120,113,108));
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.cd-side-card h2,.cd-toc h2{
  margin:0;font-family:var(--f-display);font-size:15px;font-weight:700;letter-spacing:-.02em;
  text-transform:none;color:var(--ink);
}
/* A count, so the card says how much is behind it before you read it. */
.cd-count{
  margin-left:auto;font-family:var(--f-data);font-size:10.5px;font-variant-numeric:tabular-nums;
  color:rgb(var(--h,120,113,108));background:rgba(var(--h,120,113,108),.08);
  border-radius:20px;padding:2px 8px;
}

.cd-card--nav{--h:27,63,196}
.cd-card--skill{--h:14,138,95}
.cd-card--interest{--h:109,40,217}
.cd-card--real{--h:180,83,9}
/* Interest tags take the card's violet, so the group reads as one idea rather than
   as leftover grey chips. */
.cd-tags{display:flex;flex-wrap:wrap;gap:6px}
.cd-tags em{
  font-style:normal;font-size:12px;font-weight:500;
  color:rgb(var(--h,120,113,108));
  background:rgba(var(--h,120,113,108),.07);
  border:1px solid rgba(var(--h,120,113,108),.2);
  border-radius:7px;padding:3px 10px;
}

/* Skills carry an Importance value in the database that the page was throwing
   away, rendering every skill as an identical tag. As a ranked list with a bar
   it says which ones actually decide whether you can do the job. */
.cd-skills{display:grid;gap:9px}
.cd-skill{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-items:baseline}
.cd-skill b{font-size:13px;font-weight:500;color:var(--ink-2);min-width:0}
.cd-skill.is-key b{color:var(--ink);font-weight:600}
.cd-skill em{
  font-style:normal;font-family:var(--f-data);font-size:9.5px;letter-spacing:.06em;
  color:var(--verify);
}
.cd-skill i{
  grid-column:1 / -1;display:block;height:4px;border-radius:4px;
  background:var(--line-2);position:relative;overflow:hidden;
}
.cd-skill i::after{
  content:"";position:absolute;inset:0 auto 0 0;width:var(--val,0%);border-radius:4px;
  background:var(--line);
}
.cd-skill.is-key i::after{background:var(--verify)}
.cd-side-card > p{margin:12px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted)}

/* "3 / 5" makes a reader do arithmetic to learn nothing. The word carries the
   meaning and the fraction stays for anyone comparing two careers. */
.cd-meter{display:grid;gap:16px}
.cd-meter > div > span{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:12.5px;color:var(--ink-2);margin-bottom:7px;
}
.cd-meter > div > span b{
  font-weight:600;color:var(--ink);
}
.cd-meter > div > span b small{
  font-family:var(--f-data);font-size:10px;font-weight:400;color:var(--muted);margin-left:6px;
}
.cd-meter i{
  display:block;height:6px;border-radius:6px;background:var(--line-2);position:relative;overflow:hidden;
}
.cd-meter i::after{
  content:"";position:absolute;inset:0 auto 0 0;width:var(--val,0%);border-radius:6px;
  background:linear-gradient(90deg,#0e8a5f,#b45309 78%,#be2c2c);
}
/* Five ticks, so the scale is visible rather than implied. */
.cd-meter i::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),
             rgba(255,255,255,.85) calc(20% - 1px) 20%);
}

@media (max-width:1080px){
  .cd-grid{grid-template-columns:1fr;gap:28px}
  .cd-tiles{grid-template-columns:1fr}
  /* display:contents dissolves the sidebar so its children can be ordered
     individually. The contents list is useful above the article; the skills and
     meters are not, and stacking all four there pushed the writing off the
     screen entirely on a phone. */
  .cd-side{display:contents}
  .cd-toc{order:-1}
  .cd-main{order:0}
  .cd-side-card{order:1}
  .cd-toc ol{grid-template-columns:repeat(2,minmax(0,1fr));display:grid;gap:2px 12px}
}

/* People save and print these pages. Worth twelve lines. */
@media print{
  .cd-hero{background:none;color:#000;padding:0 0 18px;border-bottom:1px solid #999}
  .cd-hero::before,.cd-actions,.cd-toc{display:none}
  .cd-hero h1{color:#000;font-size:26px}
  .cd-lede,.cd-facts dd{color:#000}
  .cd-facts dt{color:#444}
  .cd-kicker a,.cd-kicker .cd-code{color:#000;background:none;border-color:#999}
  .cd-grid{grid-template-columns:1fr;gap:0}
  .cd-side{display:contents}
  .cd-card,.cd-side-card{border-color:#bbb;break-inside:avoid}
  .cd-sec{break-inside:avoid-page}
  .cd-anchor{display:none}
}
@media (max-width:720px){
  .cd-hero{padding:32px 0 32px}
  .cd-facts > div{padding-right:18px;margin-right:18px}
  .cd-facts dd{font-size:13.5px}
  .cd-actions .cd-btn{flex:1 1 auto;justify-content:center}
  .cd-sec--frank .cd-prose{padding:16px 16px}
  .cd-card{padding:18px 16px}
}
@media (prefers-reduced-motion:reduce){ .cd *{transition:none!important} }