/* =====================================================================
   THE JOB — the career popup's layout (2026-10-15)
   Naveen picked version A of Design/career-popup: the college popup's
   anatomy, one column, no tabs. A poster with the name and its question,
   one meta row (world, track, fit, door), the day as the lead; then what it
   asks, the trade-off, the ways in with their exams, and the week's try-out.
   Loaded after career-v2.css; Blue Rail tokens and the Apple-card language.
   ===================================================================== */

/* ---------- the sheet: one column, the footer held at the foot */
.dlg-career:has(.pa-poster) .dlg-in{display:flex; flex-direction:column; height:min(88vh, 900px)}
.dlg-career:has(.pa-poster) #dlg-body{flex:1 0 auto; display:flex; flex-direction:column}
.dlg-career:has(.pa-poster) .dlg-x{top:20px; right:20px; width:40px; height:40px; border-radius:50%; background:#fff; color:var(--navy);
  box-shadow:0 0 0 1px rgba(16,34,64,.12)}
.dlg-career:has(.pa-poster) .dlg-x:hover{background:#eef5fa; color:var(--navy)}
.pa-foot{margin-top:auto !important; justify-content:space-between; align-items:center; padding:14px 32px !important;
  border-top:1px solid var(--hair); background:rgba(255,255,255,.96); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.pa-foot .sx-save{min-height:48px; padding-inline:22px}
.pa-foot:not(:has(.kp-col)){justify-content:flex-end}

/* ---------- the poster: the college popup's, with the career's question */
.pa-poster{min-height:232px}
.pa-poster .cp-pb{max-width:76%}
.pa-poster .cp-n{margin-top:12px; font-size:1.08rem; line-height:1.45; max-width:52ch; text-wrap:pretty}
.pa-poster .sx-back{color:var(--psub)} .pa-poster .sx-back:hover{color:var(--pink)}

/* ---------- the body */
.pa-b{gap:30px}
.pa-meta .cp-loc .i{width:17px; height:17px}
/* the door and the fit lead the row, so the door's meaning (280px, hung from
   the badge's left edge) always has the room to its right */
.pa-meta .kp-door{margin:0 8px 0 0}
.pa-meta .cc-fit{margin-right:14px; background:var(--blue-24); color:var(--blue-ink)}
/* world • track travel together, so a line never ends on the separator */
.pa-where{display:inline-flex; align-items:center; white-space:nowrap}
.pa-meta .kp-door[data-mean]:not([data-mean=""])::after{max-width:min(280px, calc(100vw - 56px))}
.pa-lead{font-size:1.36rem; line-height:1.45; letter-spacing:-.014em; color:var(--navy); max-width:52ch; text-wrap:pretty}
/* How it differs: a section head like the rest; the hairline spans the column, the measure is the text's */
.pa-diff{margin-top:18px; padding-top:18px; border-top:1px solid var(--hair)}
.pa-diff p{font-size:.98rem; line-height:1.55; color:var(--ink-2); max-width:64ch; text-wrap:pretty}
.pa-b .kp-reg{margin-top:0; padding:18px 20px}

.pa-asks{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 18px}
.pa-asks li{font-size:.98rem}

/* the trade-off: what you'd enjoy beside the hard part, under the same heads as every section */
.pa-pair{padding-top:26px; border-top:1px solid var(--hair)}
.pa-pc ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.pa-pc li{position:relative; padding-left:17px; font-size:.98rem; line-height:1.45; color:var(--ink); text-wrap:pretty}
.pa-pc li::before{content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--blue)}
.pa-pc.is-hard li::before{background:var(--hair-3)}

/* Ways in: alternatives, not steps, so one tile of rows (the usual route first); then colleges per degree */
.pa-ways ol{list-style:none; margin:0; padding:2px 20px; border-radius:20px; background:var(--canvas)}
.pa-ways li{padding:14px 0; border-top:1px solid var(--hair); font-size:1rem; font-weight:500; line-height:1.42; color:var(--navy); text-wrap:pretty}
.pa-ways li:first-child{border-top:0}
.pa-degs{display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:16px}

/* Exams on the way: two to a line where there is room, a lone last row across both;
   the type chip only when the rows differ in it (an empty one is not drawn) */
.pa-exams .kp-exs{grid-template-columns:repeat(auto-fit, minmax(300px, 1fr))}
.pa-exams .kp-exs > li:last-child:nth-child(odd){grid-column:1 / -1}
.pa-exams .kp-ex-t:empty{display:none}
/* a college link's words are one run ("Find colleges for B.Des"); the 32px square is only the icon's */
.kp-col > span.kp-col-t, .kp-col.is-none > span.kp-col-t{display:inline; width:auto; height:auto; border-radius:0; background:none; color:inherit}

/* Try this week */
.pa-try{display:flex; gap:16px; align-items:flex-start; padding:20px 22px; border-radius:22px; background:var(--canvas)}
.pa-try-i{flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:#fff; color:var(--blue)}
.pa-try-i .i{width:20px; height:20px}
.cp-b .pa-try h3{margin-bottom:4px}
.pa-try-t{font-size:1.02rem; line-height:1.5; color:var(--navy); max-width:62ch; text-wrap:pretty}
.pa-try .kp-try-add, .pa-try .kp-try-on{margin-top:14px}
.pa-try .kp-try-add{background:#fff !important}

.pa-sim button{background:var(--canvas); border-color:transparent}
.pa-sim button .i{width:14px; height:14px; color:var(--ink-4)}
.pa-b .kp-more{margin:0}

/* ---------- phones: the sheet is the whole screen */
@media (max-width:720px){
  .dlg-career:has(.pa-poster) .dlg-in{height:100dvh}
  /* the motif keeps its corner at 60%, large enough that the close button sits wholly
     on it as on desktop; the words start below it, on the poster's ground */
  .pa-poster{min-height:200px; padding-top:86px}
  .pa-poster .motif{inset:0 0 auto auto; width:60%; height:auto; aspect-ratio:4 / 3}
  /* the ring motif's centre dot would only show as a crumb in the rounded corner */
  .pa-poster .motif circle.mf[cx="400"]{display:none}
  .pa-poster .cp-pb{max-width:100%}
  /* world and track each take a line under the door and the fit, with no separator */
  .pa-where{flex-basis:100%; display:grid; gap:2px; margin-top:8px; white-space:normal}
  .pa-where i{display:none}
  .pa-b{padding:18px 18px 26px; gap:24px}
  .pa-lead{font-size:1.18rem}
  .pa-asks{grid-template-columns:minmax(0, 1fr)}
  .pa-exams .kp-exs{grid-template-columns:minmax(0, 1fr)}
  .pa-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom)) !important}
  .pa-foot .kp-col{display:none}
  .pa-foot .sx-save{flex:1}
}