/* =====================================================================
   CAREER CONTENT v2 — the career popup's new blocks (2026-10-15)
   From career-content-fix-v2: the door badge, How it differs, Ways in with
   "Find colleges for <degree>", Exams on the way and each exam's profile,
   Try this week, the career's own hard part, the regulatory note.
   Loaded after cards.css; the Apple-card language: canvas tiles on the white
   sheet, no borders, Blue Rail tokens only (the three doors are told apart
   by fill, not by a new colour).
   ===================================================================== */

/* ---------- the door badge, beside the title; its meaning on hover or focus */
.kp-door{position:relative; display:inline-block; margin-left:10px; vertical-align:middle; padding:4px 11px; border-radius:999px;
  font-size:.74rem; font-weight:600; letter-spacing:0; line-height:1.3; white-space:nowrap; cursor:help;
  background:var(--canvas); color:var(--navy)}
.kp-door-field-led{background:var(--sky-16); color:var(--blue-ink)}
.kp-door-licensed{background:var(--navy); color:#fff}
.kp-door:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.kp-door[data-mean]:not([data-mean=""])::after{content:attr(data-mean); position:absolute; z-index:5; left:0; top:calc(100% + 8px);
  width:max-content; max-width:280px; padding:10px 12px; border-radius:14px; background:#fff; color:var(--navy);
  font-size:.82rem; font-weight:400; line-height:1.45; white-space:normal; text-align:left;
  box-shadow:0 18px 40px -18px rgba(16,34,64,.45), 0 1px 2px rgba(16,34,64,.06);
  opacity:0; visibility:hidden; translate:0 -4px; transition:opacity .18s, translate .18s, visibility 0s linear .18s}
.kp-door[data-mean]:not([data-mean=""]):is(:hover, :focus)::after{opacity:1; visibility:visible; translate:0 0; transition:opacity .18s, translate .18s}
/* the hero clips its own overflow; while the meaning shows it may spill over the tabs (the sheet still clips its corners) */
.kp-hero:has(.kp-door:hover, .kp-door:focus){overflow:visible; z-index:6}

/* ---------- How it differs, under the day */
.kp-diff{margin:14px 0 0 !important; padding-top:14px; border-top:1px solid rgba(16,34,64,.08);
  font-size:.95rem !important; line-height:1.55 !important; color:var(--ink-2) !important}
.kp-diff b{display:block; margin-bottom:4px; font-size:.8rem; font-weight:600; color:var(--blue)}

/* ---------- the regulatory note: a canvas tile, no outline */
.kp-reg{margin-top:12px; border:0 !important; background:var(--canvas)}
.kp-reg h3 span{background:#fff}

/* ---------- Ways in: the three routes, then a college link per degree */
.kp-ways{list-style:none; counter-reset:way; margin:0; padding:0; display:grid; gap:10px}
.kp-ways li{counter-increment:way; display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:20px;
  background:var(--canvas); font-size:1rem; line-height:1.45; color:var(--navy)}
.kp-ways li::before{content:counter(way); flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:10px;
  background:#fff; color:var(--blue); font-size:.86rem; font-weight:600}
.kp-degs{display:grid; gap:12px; margin-top:22px}
.kp-col.is-none{margin:0; color:var(--ink-3)}
.kp-col.is-none > span{background:var(--canvas); color:var(--ink-3)}

/* ---------- Exams on the way: one row per exam, the profile on tap */
.kp-exs{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.kp-ex{all:unset; box-sizing:border-box; display:flex; align-items:center; gap:14px; width:100%; padding:16px 18px; border-radius:20px;
  background:var(--canvas); cursor:pointer; transition:background-color .2s}
.kp-ex:hover{background:color-mix(in srgb, var(--canvas) 70%, var(--sky) 30%)}
.kp-ex:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.kp-ex-b{flex:1; min-width:0; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:4px 10px}
.kp-ex-b b{font-size:1rem; font-weight:600; color:var(--navy)}
.kp-ex-t{justify-self:start; padding:2px 9px; border-radius:999px; background:#fff; color:var(--blue-ink); font-size:.72rem; font-weight:600}
.kp-ex-b small{grid-column:1 / -1; font-size:.86rem; line-height:1.45; color:var(--ink-2)}
.kp-ex > .i{flex:none; width:18px; height:18px; color:var(--ink-4)}

/* ---------- an exam's profile */
.kp-exam{display:grid; gap:14px; align-content:start}
.kp-exd{margin:0; display:grid; gap:0; padding:6px 20px; border-radius:22px; background:var(--canvas)}
.kp-exd > div{display:grid; grid-template-columns:9.5rem minmax(0, 1fr); gap:14px; padding:13px 0; border-top:1px solid rgba(16,34,64,.07)}
.kp-exd > div:first-child{border-top:0}
.kp-exd dt{font-size:.84rem; font-weight:600; color:var(--navy)}
.kp-exd dd{margin:0; font-size:.92rem; line-height:1.55; color:var(--ink-2); text-wrap:pretty}
.kp-exd .kp-chips{margin:0}
.kp-stages{margin:0; padding-left:1.2em; list-style:decimal; display:grid; gap:4px}
.kp-exam .kp-fact{border:0; background:var(--canvas)}

@media (max-width:640px){
  .kp-exd > div{grid-template-columns:minmax(0, 1fr); gap:4px}
  .kp-door::after{max-width:220px}
}