/* Insights (jobs host). The compact panel system, approved 2026-10-31 (design/mockups/insights-template/index.html).
   Everything is scoped to .ins so it cannot touch another page. Colours are tokens, so dark follows.
   One spacing scale (4 8 12 16 24 32) and one panel shape: a header row with a hairline, the figure and its sentence,
   the chart, then a folded "Source and caveats" and the share links pinned to the bottom. */
.ins{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--hair:color-mix(in srgb,var(--rule) 22%,transparent)}
.ins .wrap{max-width:1320px}
.ins .sec{padding:var(--s5) 0;border-bottom:0}
.ins .sec.tight{padding:var(--s4) 0}
.ins .crumbs{padding:var(--s4) 0 0}

/* hero: headline and lede left, the lead figure right, nothing else above the fold */
.ins .hero{padding:var(--s3) 0 0}
.ins .hero h1.h-l{font-size:clamp(1.7rem,2.5vw,2.2rem);line-height:1.05;letter-spacing:-.015em;max-width:20em;text-wrap:balance}
.ins .hero .lede{margin-top:var(--s3);font-size:1.0625rem;line-height:1.45;max-width:36em}
.ins .hero p.fact{margin-top:var(--s3);font-size:1.0625rem;line-height:1.45;max-width:36em}
.ins .hero p.fact b{background:var(--lime);color:#111827;padding:0 var(--s1)}
.ins .hero .lead{display:grid;grid-template-columns:7fr 5fr;gap:var(--s6);align-items:center}
.ins .fresh{display:inline-flex;gap:var(--s2);align-items:center;margin-top:var(--s3);padding:var(--s1) var(--s3);border:1.5px solid var(--ink);background:var(--lime);color:#111827;font:600 .7rem var(--f-m);letter-spacing:.08em;text-transform:uppercase}
.ins .fresh i{width:8px;height:8px;border-radius:50%;background:#111827;display:inline-block}
.ins .lead-card{background:var(--base);color:var(--ink);border:1.5px solid var(--ink);padding:var(--s4) var(--s5);display:grid;gap:var(--s2)}
.ins .lead-card .big-num{font-size:clamp(2.6rem,4.4vw,3.6rem);line-height:.95;color:var(--cobalt);overflow-wrap:anywhere}

/* the figure type, shared by every panel */
.ins .topic{font:500 .7rem/1.4 var(--f-m);letter-spacing:.09em;text-transform:uppercase;color:var(--ink2)}
.ins .big{font:800 1.75rem/1 var(--f-d);letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* the panel: hub tiles, topic facts, and the closing notes all share it */
.ins .panel{background:var(--base);border:1.5px solid var(--ink);padding:14px 20px;margin:0;display:flex;flex-direction:column;min-width:0}
.ins .panel>h2,.ins .panel>h2.ph{font:800 .8rem/1.2 var(--f-d);font-stretch:100%;letter-spacing:.02em;text-transform:uppercase;padding-bottom:var(--s2);margin-bottom:var(--s3);border-bottom:1px solid var(--hair)}
.ins .panel p{max-width:46em}
.ins .panel .how{font-size:.875rem;color:var(--ink2)}
.ins .panel .how a{color:var(--cobalt);font-weight:600}
.ins .pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);grid-auto-flow:dense}
.ins .pgrid .panel.wide,.ins .pgrid .panel[data-w]{grid-column:span 2}
.ins .pgrid .panel.short,.ins .pgrid .panel.wide:last-child{grid-column:1/-1}
.ins section.f{scroll-margin-top:90px}
.ins .fl{display:flex;flex-direction:column;gap:var(--s1);margin-bottom:var(--s3)}
.ins .fl .big{color:var(--cobalt)}
.ins .fl p{font-size:.8125rem;line-height:1.4}
.ins .caveat{font-size:.8125rem;color:var(--ink2);margin-top:var(--s2)}
.ins .src{margin-top:auto;padding-top:var(--s2);border-top:1px solid var(--hair);color:var(--ink2);font-size:.8125rem;line-height:1.45}
.ins .src summary{cursor:pointer;color:var(--cobalt);list-style:none;min-height:24px}
.ins .src summary::-webkit-details-marker{display:none}
.ins .src summary::before{content:"+ "}.ins .src[open] summary::before{content:"\2013 "}
.ins .src[open] summary{margin-bottom:var(--s2)}
.ins .src .caveat:first-of-type{margin-top:0}
.ins .prev{font-size:.8125rem;margin-top:var(--s2);padding:var(--s2) var(--s3);background:var(--canvas);border-left:3px solid var(--cobalt)}
.ins .panel:has(>.src)>.ch,.ins .panel:has(>.src)>.t,.ins .panel:has(>.src)>.tiles,.ins .panel:has(>.src)>table{margin-bottom:var(--s3)}
.ins .share{display:flex;gap:var(--s3);margin-top:var(--s2);flex-wrap:wrap}
.ins .share a{display:inline-flex;align-items:center;min-height:32px;color:var(--ink2);font:600 .68rem var(--f-m);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.ins .share a:hover{color:var(--cobalt)}

/* charts and tables inside a panel */
.ins svg.ch{display:block;margin-top:var(--s2);max-width:100%;height:auto}
.ins svg.ch rect.on{fill:var(--cobalt)}
.ins svg.ch rect.off{fill:color-mix(in srgb,var(--cobalt) 28%,var(--base))}
.ins svg.ch rect.wk{fill:var(--sand)}
.ins svg.ch line.us{stroke:var(--ink)}
.ins svg.ch text{font-family:var(--f-m)}
.ins svg.ch text.val{fill:var(--ink)}
.ins svg.ch text.lab{fill:var(--ink2)}
.ins svg.ch polyline.ln{fill:none;stroke:var(--cobalt);stroke-width:3}
.ins svg.ch circle.pt{fill:var(--cobalt)}
.ins svg.ch line.ax{stroke:var(--rule);stroke-width:1.5}
.ins table.t,.ins table.cmp{width:100%;border-collapse:collapse;margin-top:var(--s2);font-size:.875rem}
.ins .t th,.ins .t td,.ins table.cmp th,.ins table.cmp td{text-align:left;padding:6px 0;border-bottom:1px solid var(--hair)}
.ins .t th,.ins table.cmp thead th{font:700 .64rem/1.3 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);border-bottom:1.5px solid var(--ink)}
.ins .t td.n,.ins .t th.n,.ins table.cmp .n{text-align:right}
.ins .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:var(--s2);margin-top:var(--s2)}
.ins .tiles>div{border:1.5px solid var(--ink);background:var(--canvas);padding:var(--s2) var(--s3);display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.ins .tiles .nm{font-size:.8125rem;color:var(--ink)}
.ins .tiles b{font:800 1.375rem/1.1 var(--f-d);font-variant-numeric:tabular-nums;color:var(--cobalt);overflow-wrap:anywhere}
.ins .tiles .sub{font-size:.75rem;color:var(--ink2)}
.ins .switch{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s3) 0 var(--s1)}
.ins .switch .btn{padding:var(--s2) var(--s4);font-size:.875rem}
.ins .doors{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s3)}

/* hub: the numbers worth knowing */
.ins .head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1);margin-bottom:var(--s4)}
.ins .head h2{font-size:1.375rem;line-height:1.05}
.ins .head .mono{padding:0;margin:0}
.ins .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.ins a.fact{background:var(--base);border:1.5px solid var(--ink);padding:14px 20px;display:flex;flex-direction:column;gap:var(--s2);text-decoration:none;color:var(--ink);transition:box-shadow .2s}
.ins a.fact:hover{box-shadow:0 4px 0 var(--cobalt)}
.ins a.fact .big{font-size:1.75rem}
.ins a.fact:nth-child(3n+2) .big{color:var(--cobalt)}
.ins a.fact:nth-child(3n) .big{color:var(--coral)}
.ins a.fact p{font-size:.8125rem;line-height:1.4}
.ins a.fact .meta{margin-top:auto;font:500 .68rem/1.4 var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.ins a.fact .go{font:700 .7rem var(--f-m);letter-spacing:.09em;text-transform:uppercase;color:var(--cobalt)}
.ins .band{background:transparent}
.ins .band .two{align-items:start;gap:var(--s4)}
.ins .band .panel{background:var(--base)}
.ins .band .panel h2{font-size:.8rem}
.ins .topics{display:grid;gap:var(--s2)}
.ins .topics a{display:block;border:1.5px solid var(--hair);padding:var(--s3);text-decoration:none;background:var(--canvas);min-height:44px}
.ins .topics a:hover{background:var(--lav)}
.ins .topics b{display:block;font-size:.875rem}
.ins .topics span{font-size:.8125rem;color:var(--ink2)}
.ins .moved{margin:0;padding-left:var(--s5);display:grid;gap:var(--s2);font-size:.875rem}
.ins .empty{border:1.5px dashed var(--rule);padding:var(--s4);color:var(--ink2);font-size:.875rem}
.ins .data{display:grid;grid-template-columns:1fr auto;gap:var(--s5);align-items:center;background:var(--lime);color:#111827;border:1.5px solid #111827;padding:var(--s4) var(--s5)}
.ins .data h3{font-size:1.25rem;margin-bottom:var(--s1)}
.ins .data .btn{background:#111827;color:var(--lime)}
.ins .data .acts{display:flex;gap:var(--s2);flex-wrap:wrap}
.ins .data .btn.ghost{background:none;color:#111827;box-shadow:inset 0 0 0 2px #111827}
.ins .btn{padding:var(--s3) var(--s4);font-size:.9375rem}

/* the hub's lead story: the headline percentage and the bars are the same numbers */
.ins .lead-story{display:grid;grid-template-columns:5fr 7fr;border:1.5px solid var(--ink);background:var(--base)}
.ins .lead-story .t{padding:var(--s5);border-right:1.5px solid var(--ink);display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
.ins .lead-story .lead-h{font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.05;overflow-wrap:anywhere}
.ins .lead-story .t .btn{margin-top:auto}
.ins .lead-story .c{padding:var(--s4) var(--s5);background:#111827;color:#F3F0E7;display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.ins .lead-story .c .mono{color:#98a1ae}
.ins .col{display:flex;align-items:flex-end;gap:var(--s3);height:170px;border-bottom:2px solid #3a4152;padding:0 6px;margin-top:auto}
.ins .col div{flex:1;min-width:0;background:#2448E8;position:relative;transform-origin:bottom;animation:insup 1.2s cubic-bezier(.2,.7,.2,1) both}
.ins .col div.hi{background:#DFFF68}
.ins .col div span{position:absolute;top:-20px;left:0;right:0;text-align:center;font:600 .68rem var(--f-m);color:#F3F0E7}
.ins .lab{display:flex;gap:var(--s3);padding:var(--s2) 6px 0;font:500 .64rem var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:#98a1ae}
.ins .lab span{flex:1;text-align:center;min-width:0;overflow-wrap:anywhere}
@keyframes insup{from{transform:scaleY(0)}}
@media(prefers-reduced-motion:reduce){.ins .col div{animation:none}}

/* cite and share, related, live links, the CV band */
.ins .use{align-items:start;gap:var(--s4)}
.ins .usecol{display:grid;gap:var(--s4)}
.ins .cite{background:var(--base);border:1.5px solid var(--ink);padding:var(--s4) var(--s5)}
.ins .cite .q{margin:var(--s2) 0 var(--s3);font-size:.875rem;overflow-wrap:anywhere}
.ins .cite .note{margin:var(--s3) 0 0;font-size:.8125rem;color:var(--ink2)}
.ins .cite .act,.ins .sharebar{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.ins .cite .act button,.ins .cite .act a,.ins .sharebar a,.ins .sharebar button{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s4);border:1.5px solid var(--ink);background:var(--base);font:600 .7rem var(--f-m);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--ink);cursor:pointer}
.ins .cite .act button:hover,.ins .cite .act a:hover,.ins .sharebar a:hover,.ins .sharebar button:hover{background:var(--lime);color:#111827}
.ins .sharebar .mono{color:var(--ink2)}
.ins .scimg{display:block;width:100%;height:auto;border:1.5px solid #111827}
.ins .rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.ins .rel a{display:flex;flex-direction:column;gap:var(--s2);background:var(--base);border:1.5px solid var(--ink);padding:14px 20px;text-decoration:none;color:var(--ink);min-height:44px;transition:box-shadow .2s;font-size:.8125rem}
.ins .rel a:hover{box-shadow:0 4px 0 var(--cobalt)}
.ins .rel b{font:800 1rem/1.1 var(--f-d);font-stretch:100%;text-transform:uppercase}
.ins .livejobs h3{font-size:1.25rem;margin-bottom:var(--s2)}
.ins .livejobs a{display:inline-block;margin:0 var(--s5) 0 0;padding:var(--s3) 0;color:var(--cobalt);font-weight:600;text-decoration:none;min-height:44px}
.ins-cv{background:var(--lav)}
.ins-cv-in{display:flex;gap:var(--s5);align-items:center;justify-content:space-between;flex-wrap:wrap}
.ins-cv-in h2{margin:var(--s2) 0 var(--s2);font-size:1.5rem}
.ins-cv-in a:not(.btn){color:var(--cobalt);font-weight:600}

@media(max-width:1100px){.ins .pgrid,.ins .facts,.ins .rel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1000px){.ins .hero .lead,.ins .data,.ins .lead-story{grid-template-columns:minmax(0,1fr)}.ins .lead-story .t{border-right:0;border-bottom:1.5px solid var(--ink)}.ins .hero .lead{gap:var(--s5)}}
@media(max-width:700px){
  .ins .pgrid,.ins .facts,.ins .rel{grid-template-columns:minmax(0,1fr)}
  .ins .pgrid .panel.wide,.ins .pgrid .panel[data-w]{grid-column:auto}
  .ins .data{padding:var(--s4)}.ins .data .btn{justify-content:center}
  .ins .col{height:150px;gap:var(--s2)}.ins .lab{gap:var(--s2);font-size:.62rem;letter-spacing:.04em}
  .ins svg.ch text{font-size:24px}.ins svg.ch text.val{font-size:26px}
  .ins .t th,.ins .t td{padding:8px 4px}
  .ins-cv-in .btn{width:100%;justify-content:center}
  .ins .how a,.ins-cv-in a:not(.btn){display:inline-block;padding:13px 3px}
}

/* a chart drawn on a 700-unit canvas shrinks to about 0.57 in a one-third panel, so its text is set larger there to land near 13px */
.ins .panel:not([data-w]) svg.ch text{font-size:24px}
.ins .panel:not([data-w]) svg.ch text.val{font-size:26px}

/* /jobs/ai (routers/jobs_ai.py): the same panels, a role table that scrolls on a phone, chips and a search box */
.ins .pgrid .panel.full{grid-column:1/-1}
.ins .ai-scroll{overflow-x:auto;margin-bottom:var(--s3)}
.ins .ai-scroll table.cmp{min-width:560px;margin-top:0}
.ins .ai-scroll table.cmp tbody th{font-weight:600;text-align:left;padding:6px 0;border-bottom:1px solid var(--hair)}
.ins .ai-scroll table.cmp tbody th a{color:var(--ink);text-decoration:none}
.ins .ai-scroll table.cmp td a{color:var(--cobalt);font-weight:700;text-decoration:none}
.ins .ai-search{display:flex;gap:var(--s2);flex-wrap:wrap;max-width:36em;margin-top:var(--s4)}
.ins .ai-search input{flex:1 1 240px;min-height:44px;padding:var(--s2) var(--s3);font:600 1rem var(--f-d);border:1.5px solid var(--ink);background:var(--base);color:var(--ink)}
.ins .ai-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ins .ai-chips{display:flex;gap:var(--s2);flex-wrap:wrap}
.ins .ai-chips a{display:inline-flex;align-items:center;gap:var(--s2);min-height:36px;padding:0 var(--s3);border:1.5px solid var(--ink);background:var(--canvas);color:var(--ink);font-size:.875rem;text-decoration:none}
.ins .ai-chips a:hover{background:var(--lime);color:#111827}
.ins .ai-links{list-style:none;display:grid;gap:var(--s2);margin:0;padding:0}
.ins .ai-links a{color:var(--cobalt);font-weight:600;font-size:.875rem;text-decoration:none}
.ins .ai-faq details{border-top:1px solid var(--hair);padding:var(--s2) 0}
.ins .ai-faq details:first-child{border-top:0}
.ins .ai-faq summary{cursor:pointer;font-weight:600;font-size:.9375rem}
.ins .ai-faq p{margin:var(--s2) 0 0;font-size:.875rem;color:var(--ink2)}
.ins .lead-card .t td{border-bottom:1px solid var(--hair);padding:6px 0}
.ins .lead-card .t tr:last-child td{border-bottom:0}