/* Carte C · « Le marché du travail à cet horizon » (market.js). Load after sillon.css; tokens only, no font names.
   Trait grammar: the published scenario panel is au crayon (dashed graphite, never animated), observed outcomes are
   à l'encre (solid encre rule + double ring), BMO is a neutral dated source panel. Red only for the tu-es-ici ring;
   blue only for sources, dates and links (via .source / .date-source / a from sillon.css). */
.mk{display:grid;gap:20px;min-width:0;color:var(--sillon-encre);font-family:var(--f-texte)}
.mk *,.mk *::before,.mk *::after{box-sizing:border-box}
.mk p{margin:0}
.mk-head{display:grid;gap:8px;min-width:0}
.mk-title{margin:0;font-size:24px;line-height:1.15}
.mk-intro{max-width:72ch;font-size:15px}
.mk-panels{display:grid;gap:18px;min-width:0}
.mk-panel{min-width:0;display:grid;gap:12px;align-content:start;padding:20px 22px;border-radius:var(--radius-card);background:var(--sillon-feuille)}
.mk-crayon{border:1.5px dashed var(--sillon-graphite)}
.mk-source{border:1px solid var(--sillon-filet);box-shadow:var(--sillon-ombre-douce)}
.mk-encre{border:1px solid var(--sillon-filet);border-left:5px solid var(--sillon-encre);box-shadow:var(--sillon-ombre-douce)}
.mk-kind{display:flex;align-items:flex-start;gap:8px}
.mk-kind>[aria-hidden]{flex:none;margin-top:3px}
.mk-kind .data{min-width:0}
.mk-kind .trait,.mk-kind .trait-crayon{width:28px;min-width:0;margin-top:6px}
.mk-kind .trait{height:4px}
.mk-panel-title{margin:0;font-size:20px;line-height:1.2}
.mk-lead{font-size:14.5px;max-width:72ch}
.mk-note{font-size:13px;line-height:1.45;color:var(--sillon-graphite)}
.mk-status{font-size:14.5px;color:var(--sillon-graphite);max-width:72ch}
.mk-absent{color:var(--sillon-graphite);font-weight:700}
.mk-loading{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--sillon-graphite)}
.mk-fail{display:grid;gap:8px;justify-items:start;padding:10px 12px;border:1px solid var(--sillon-filet-fort);border-radius:12px;font-size:14px;color:var(--sillon-encre)}

/* ---------- Horizon of the plan ---------- */
.mk-plan,.mk-empty{display:grid;gap:10px;padding:14px 16px;border-radius:var(--radius-tile);border:1.5px dashed var(--sillon-graphite);background:var(--sillon-feuille)}
.mk-empty{justify-items:start}
.mk-empty-title{font-family:var(--f-titre);font-weight:var(--titre-weight);font-stretch:var(--titre-stretch);font-size:20px;line-height:1.2}
.mk-end{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.mk-end-year{font-family:var(--f-titre);font-weight:var(--titre-weight);font-stretch:var(--titre-stretch);font-size:30px;line-height:1}
.mk-end-cap{color:var(--sillon-graphite);font-size:14px}
.mk-line{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:10px}
.mk-stop{display:flex;align-items:center;gap:8px;min-width:0}
.mk-stop .trait-crayon{width:30px;min-width:0;margin:0 2px 0 6px}
.mk-stop-label{font-size:13px;line-height:1.3;overflow-wrap:anywhere}
.mk-stop-label .data{margin-right:4px}
.mk-stop-end .mk-stop-label{font-weight:700}
.mk-stop-tag{font-weight:400;color:var(--sillon-graphite)}
.mk-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--sillon-graphite)}
.mk-legend li{display:flex;align-items:center;gap:6px;min-width:0}

/* ---------- Pickers ---------- */
.mk-picker{display:grid;gap:6px;min-width:0}
.mk-label{font-weight:700;font-size:14.5px}
.mk-help{font-size:13px;color:var(--sillon-graphite);max-width:72ch}
.mk-search,.mk-select select{width:100%;min-height:44px;padding:10px 14px;border:1px solid var(--sillon-filet-fort);border-radius:12px;background:var(--sillon-feuille);color:var(--sillon-encre);font-family:var(--f-texte);font-size:15px}
.mk-search::placeholder{color:var(--sillon-graphite)}
.mk-search-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,220px);gap:10px;align-items:end}
.mk-select{display:grid;gap:4px;min-width:0}
.mk-select-label{font-size:12px;color:var(--sillon-graphite)}
.mk-count{font-size:12.5px;color:var(--sillon-graphite)}
.mk-options{list-style:none;margin:0;padding:4px;max-height:264px;overflow:auto;border:1px solid var(--sillon-filet);border-radius:12px;background:var(--sillon-feuille);overscroll-behavior:contain}
.mk-options-inline{max-height:none}
.mk-option{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:var(--radius-small);background:transparent;color:var(--sillon-encre);font-family:var(--f-texte);font-size:14px;text-align:left;cursor:pointer}
.mk-option:hover{background:var(--sillon-voile)}
.mk-option[aria-pressed=true],.mk-option[aria-selected=true]{background:var(--sillon-encre);color:var(--sillon-feuille)}
.mk-option[aria-pressed=true] .data,.mk-option[aria-selected=true] .data{color:rgba(252,253,254,.78)}
/* Focus drawn inside the option so the scrolling list never clips it; feuille ring on the selected (encre) option */
.mk-option:focus-visible{outline:3px solid var(--sillon-encre);outline-offset:-3px;box-shadow:none}
.mk-option[aria-selected=true]:focus-visible{outline-color:var(--sillon-feuille)}
.mk-option-label{flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
.mk-picked{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px}
.mk-picked .chip{white-space:normal;overflow-wrap:anywhere;min-height:34px;font-size:13px;border-radius:14px;padding:7px 12px;max-width:100%}
.mk-picked .chip .data{color:rgba(252,253,254,.78);flex:none;white-space:nowrap;overflow-wrap:normal} /* the group code never breaks (« P3 / Z ») */
.mk-textbtn{min-height:44px;padding:0 6px;border:0;background:none;color:var(--sillon-encre);font-family:var(--f-texte);font-size:13.5px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------- Scenario rows ---------- */
.mk-outlook{display:grid;gap:0;min-width:0}
.mk-year{display:grid;gap:8px;padding:14px 0;border-top:1.5px dashed var(--sillon-filet-fort);min-width:0}
.mk-year-head{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font-family:var(--f-texte);font-size:15px;font-weight:700;letter-spacing:0}
.mk-year-n{font-family:var(--f-titre);font-weight:var(--titre-weight);font-stretch:var(--titre-stretch);font-size:22px;line-height:1}
.mk-year-cap{font-weight:400;font-size:14px;color:var(--sillon-graphite)}
.mk-earlier{display:grid;min-width:0}
.mk-earlier-title{margin-top:8px;font-weight:700;font-size:14px}
.mk-wait{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1.5px dashed var(--sillon-filet-fort)}
.mk-wait .trait-crayon{width:34px;min-width:0;flex:none}
.mk-flat{font-size:13.5px;padding-top:8px;border-top:1.5px dashed var(--sillon-filet-fort)}
.mk-flat .data{margin-right:6px}
.mk-projection,.mk-hiring{display:grid;gap:8px;min-width:0}
.mk-picked-line{font-weight:700;font-size:15px}
.mk-picked-line .data{margin-right:6px}
.mk-hero{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.mk-big{font-family:var(--f-titre);font-weight:var(--titre-weight);font-stretch:var(--titre-stretch);font-size:32px;line-height:1.05;font-variant-numeric:tabular-nums}
.mk-approx{font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.mk-figs{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px 20px;min-width:0}
.mk-fig{min-width:0}
.mk-fig-wide{grid-column:1/-1}
.mk-fig dt{font-size:13px;font-weight:700;line-height:1.35}
.mk-fig dd{margin:3px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.mk-fig-note{flex-basis:100%;font-size:12.5px;line-height:1.4;color:var(--sillon-graphite)}
.mk-caveat{font-size:13.5px;line-height:1.45;color:var(--sillon-graphite);padding-left:10px;border-left:3px dotted var(--sillon-graphite)}

/* ---------- Sources ---------- */
.mk-sources{display:grid;gap:6px;padding-top:10px;border-top:1px solid var(--sillon-filet);font-size:13px;line-height:1.5;min-width:0;overflow-wrap:anywhere}
.mk-interpretation{font-size:13.5px}
.mk-details summary{display:flex;align-items:center;gap:8px;min-height:44px;font-weight:700;font-size:13.5px;cursor:pointer;list-style:none}
.mk-details summary::-webkit-details-marker{display:none}
.mk-details summary::before{content:"+";display:inline-grid;place-items:center;width:20px;height:20px;flex:none;border:1.3px solid var(--sillon-encre);border-radius:50%;font-family:var(--f-data);font-size:13px;line-height:1}
.mk-details[open] summary::before{content:"−"}
.mk-details ul{margin:0;padding-left:18px;display:grid;gap:4px}
.mk-method p{max-height:280px;overflow:auto;font-size:12.5px;line-height:1.5;color:var(--sillon-graphite);padding-right:6px}
.mk-jobs{display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1.5px dashed var(--sillon-filet-fort);font-size:13.5px;color:var(--sillon-graphite)}

/* ---------- Observed outcomes ---------- */
.mk-linked{display:grid;gap:6px}
.mk-chips{display:flex;flex-wrap:wrap;gap:8px}
.mk .chip[data-action]{min-height:44px;padding:0 14px;cursor:pointer;font-variant-numeric:tabular-nums}
.mk-outcome{display:grid;gap:10px;min-width:0}
.mk-outcome-title{margin:0;font-size:19px;line-height:1.25;overflow-wrap:anywhere}
.mk-type{display:block;margin-top:2px;font-family:var(--f-texte);font-weight:400;font-size:13.5px;font-stretch:normal;color:var(--sillon-graphite)}
.mk-horizon-cap{margin-top:2px}
.mk-exception,.mk-quarantine{padding:8px 12px;border:1px dashed var(--sillon-filet-fort);border-radius:var(--radius-small);font-size:13.5px}
.mk-exception .data{margin-right:6px}
.mk-pair{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.mk-salary{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--sillon-filet);border-radius:var(--radius-tile)}
.mk-salary-title{font-weight:700;font-size:14px}
.mk-quartiles{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mk-quartiles dt{font-size:12.5px;color:var(--sillon-graphite)}
.mk-quartiles dd{margin:2px 0 0;overflow-wrap:anywhere}
.mk-unit{font-size:12.5px;line-height:1.45;color:var(--sillon-graphite)}
.mk-table-wrap{overflow-x:auto;max-width:100%;border:1px solid var(--sillon-filet);border-radius:var(--radius-small)}
.mk-table{border-collapse:collapse;width:100%;min-width:560px;font-size:13px;font-variant-numeric:tabular-nums}
.mk-table caption{text-align:left;padding:8px 10px}
.mk-table th,.mk-table td{padding:7px 10px;border-top:1px solid var(--sillon-filet);text-align:right;vertical-align:top}
.mk-table th[scope=row],.mk-table thead th:first-child{text-align:left;font-weight:700;max-width:260px}
.mk-table thead th{font-weight:700;white-space:nowrap}
.mk-table td:not(.mk-cell-value){color:var(--sillon-graphite)}

@media (max-width:760px){
  .mk-panel{padding:16px}
  .mk-search-row{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .mk-title{font-size:22px}
  .mk-big{font-size:28px}
  .mk-line{flex-direction:column;align-items:flex-start;gap:10px;margin-left:7px;padding:4px 0;border-left:2px dotted var(--sillon-graphite)}
  .mk-stop{margin-left:-9px}
  .mk-stop .trait-crayon{display:none}
}
.mk-option-stack{flex-direction:column;align-items:flex-start;gap:2px}
.mk-option-stack .mk-option-label{flex:none}
.mk-quartiles .mk-absent{font-weight:400;font-size:13.5px}
.mk-details,.mk-outcome>*{min-width:0;max-width:100%}
/* style.css styles bare th/td for the course tables; keep the outcome table in its own register whatever the link order */
.mk-table th,.mk-table td{padding:7px 10px;border-bottom:0;font-size:13px;line-height:1.4;background:transparent}
.mk-table th{font-family:var(--f-texte);font-weight:700;font-stretch:normal;letter-spacing:0;text-transform:none;color:var(--sillon-encre)}
.mk-table thead th{font-family:var(--f-data);font-size:var(--data-size);font-weight:var(--data-weight);font-stretch:var(--data-stretch);letter-spacing:var(--data-tracking);text-transform:uppercase;color:var(--sillon-graphite)}
/* Live region of the market tab: read by screen readers, never shown */
.mk-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}