/* Profile page: boards 2-05 to 2-12, cut back to the real session state. Tokens and shared parts come from sk.css. */
.wrapp { max-width: 1152px; margin: 0 auto; padding: 16px var(--gutter-phone) 56px; }
.wrapp h1 { font-size: var(--h1-phone); line-height: 1; margin: 0 0 20px; }
.wrapp [hidden] { display: none !important; }
.pf-note { margin: 0 0 16px; color: var(--slate); font-size: 17px; line-height: 1.5; }
.pf-grid { display: block; }
.pf-nav { display: none; }
.pf-who { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pf-key { margin: 0; font-size: var(--small); color: var(--slate); }
.pf-email { margin: 2px 0 0; font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.pf-news { margin: 2px 0 0; font-size: var(--small); color: var(--slate); }
.pf-sec { margin-top: 40px; padding-top: 18px; border-top: 1.5px solid var(--ink); scroll-margin-top: 16px; }
.pf-sec h2 { font-size: var(--h2); line-height: 1.15; margin: 0; }
.pf-help { margin: 6px 0 14px; font-size: 15px; line-height: 1.5; color: var(--slate); }
.pf-sec .empty { margin-top: 12px; }
.pf-help + .empty { margin-top: 0; }
.pf-line { margin: 12px 0 0; font-size: var(--body); line-height: 1.5; }
.pf-line a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }
@media (min-width: 900px) {
  .wrapp { padding: 28px var(--gutter-desk) 96px; }
  .wrapp h1 { font-size: var(--h1-desk); margin-bottom: 32px; }
  .pf-grid { display: grid; grid-template-columns: 220px minmax(0, 760px); column-gap: 80px; align-items: start; }
  .pf-nav { display: flex; flex-direction: column; position: sticky; top: 24px; }
  .pf-nav a { display: flex; align-items: center; min-height: var(--tap); color: var(--slate); text-decoration: none; font-size: 15px; }
  .pf-nav a:hover { color: var(--ink); }
  .pf-sec { margin-top: 56px; }
  .pf-who + .pf-note + .pf-sec, .pf-who + .pf-sec { margin-top: 32px; }
}

/* Profile page sections (session 37): answers, votes, consent, data. Onboarding shares these. */
.pf-rows { margin: 0 0 8px; display: grid; gap: 0; }
.pf-rows > div { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule, rgba(0,0,0,.12)); }
.pf-rows dt { color: var(--slate); font-size: var(--small); }
.pf-rows dd { margin: 0; overflow-wrap: anywhere; }
.pf-place { margin: 12px 0 0; font-size: 20px; font-weight: 600; }
.pf-votes, .pf-consents { list-style: none; margin: 8px 0 0; padding: 0; }
.pf-votes li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0; border-bottom: 1px solid var(--rule, rgba(0,0,0,.12)); }
.pf-vname { font-weight: 600; margin-right: auto; }
.pf-tag { font-size: var(--small); color: var(--ink); background: var(--ochre-wash, rgba(211,138,30,.18)); padding: 2px 8px; border-radius: 2px; }
.pf-consents li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--rule, rgba(0,0,0,.12)); }
.pf-consents b { font-weight: 600; }
.pf-when { color: var(--slate); font-size: var(--small); }
.pf-delete { margin-top: 12px; display: grid; gap: 10px; max-width: 420px; }
.pf-delete[hidden], .pf-delete [hidden] { display: none !important; }
.pf-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.pf-sec button, .pf-sec .cta { min-height: var(--tap); }
.pf-sec .lab { font-size: var(--small); color: var(--slate); }

/* Onboarding page: one question per screen. */
.ob { max-width: 560px; }
.ob fieldset { border: 0; padding: 0; margin: 0 0 20px; }
.ob legend { font-size: var(--h2); line-height: 1.2; font-weight: 600; padding: 0; margin-bottom: 14px; }
.ob .opt { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 6px 0; font-size: var(--body); cursor: pointer; }
.ob .opt input { width: 22px; height: 22px; accent-color: var(--ink); flex: none; }
.ob .qin { width: 100%; box-sizing: border-box; min-height: var(--tap); font-size: var(--body); }
.ob .qin[aria-invalid="true"] { border-color: var(--ochre); outline: 2px solid var(--ochre); outline-offset: 1px; }
.ob .pf-help[role="alert"] { color: var(--ink); font-weight: 600; }
.ob .ob-prog { color: var(--slate); font-size: var(--small); margin: 0 0 8px; }
.ob .ob-bar { display: flex; gap: 6px; margin: 0 0 18px; }
.ob .ob-bar i { flex: 1; height: 4px; background: var(--rule, rgba(0,0,0,.15)); }
.ob .ob-bar i.on { background: var(--ochre, #D38A1E); }
.ob .ob-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ob .consent { display: flex; align-items: flex-start; gap: 12px; min-height: var(--tap); }
.ob .consent input { width: 22px; height: 22px; margin-top: 2px; flex: none; }

/* Onboarding: the job role search (combobox over the ISCO-08 list). No transitions: nothing fades. */
.ob .combo { margin: 0 0 6px; }
.ob .combo ul { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--line, rgba(0,0,0,.2)); border-radius: var(--radius); background: var(--paper); max-height: 340px; overflow-y: auto; }
.ob .combo li { display: flex; align-items: center; min-height: var(--tap); padding: 6px 14px; cursor: pointer; border-bottom: 1px solid var(--rule, rgba(0,0,0,.12)); }
.ob .combo li:last-child { border-bottom: 0; }
.ob .combo li[aria-selected=true] { background: var(--soft); box-shadow: inset 4px 0 0 var(--ochre, #D38A1E); }
.ob .combo li.nomatch { color: var(--slate); cursor: default; }
.ob .combo ul[hidden] { display: none; }