/* selected work: a row of panels, one open (Xavi's pick from the options, 4 Oct 2026; it is option F in explorations/, and its
   class names keep that option's prefix). Five cases in one row at one height (four from 6 Oct 2026, when the sports case
   went, to 7 Oct, when the real estate one came): one is open and wide and tells its case; the others stay
   narrow and still show a band of their photo, their sector, their figure with its label and their title. Opening one
   narrows the open one in the same move.
   Without the script (and without container units) the cases are simply stacked and open: that is the default here.
   The script adds .wkp-on to the section, and every rule under that class is the scripted module, in three forms chosen by
   the module's own width (a container query, so it holds wherever the module is placed):
     pager   under 520      the cases side by side, to swipe, under an index of their figures (at the end of this file)
     bands   520 to 1183    photo at the left, the open one taller
     row     1184 and over  the panels side by side (a 1280 window and wider)
   How open a panel is, is one number: --wkp-t, 0 closed to 1 open, which the script sets on each panel and eases on one
   clock, so they always add up to one and the module's size can't change while they move. Every size that moves is
   written from it. Nothing reflows on the way: a panel's text sits at the open width and is clipped, and its photo sits at
   the open size and is uncovered, never scaled. */
.wk-panels .wkp{container:wk-panels/inline-size;overflow-anchor:none}
.wk-panels .wkp-list{display:flex;flex-direction:column;gap:12px;
  --wkp-form:strips;--wkp-pad:16px;--wkp-detail:12px;--wkp-small:15px;--wkp-title:20px;--wkp-fig:36px}
.wk-panels .wkp-panel{position:relative;display:flex;min-width:0}
/* each photo's crop: --wkp-px/py place it in the open cell; --wkp-fx is the vertical band a narrow panel shows (0 the left
   of the picture, 1 the right) and --wkp-fy the horizontal band a closed strip or band shows (0 the top, 1 the bottom) */
.wk-panels .wkp-panel:nth-child(1){--wkp-py:45%;--wkp-fx:.56;--wkp-fy:.45}
.wk-panels .wkp-panel:nth-child(2){--wkp-py:60%;--wkp-fx:.34;--wkp-fy:.6}
.wk-panels .wkp-panel:nth-child(3){--wkp-py:25%;--wkp-fx:.3;--wkp-fy:.2}
.wk-panels .wkp-panel:nth-child(4){--wkp-py:60%;--wkp-fx:.3;--wkp-fy:.6}
.wk-panels .wkp-panel:nth-child(5){--wkp-py:35%;--wkp-fx:.55;--wkp-fy:.35}
.wk-panels .wkp-card{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--fathom);border-radius:var(--r);overflow:hidden;transition:border-color .25s ease}
.wk-panels .wkp-photo{position:relative;flex:none;overflow:hidden;aspect-ratio:8/5;max-height:420px}
.wk-panels .wkp-ph{position:absolute;inset:0;border-radius:0}
.wk-panels .wkp-ph img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-position:var(--wkp-px,50%) var(--wkp-py,50%)}
.wk-panels .wkp-text{position:relative;flex:1 1 auto;min-width:0;padding:var(--wkp-pad)}
.wk-panels .wkp-sector{font-size:var(--wkp-detail);padding-right:32px}
.wk-panels .wkp-stat{display:flex;align-items:baseline;align-items:last baseline;column-gap:12px;margin-top:12px}
.wk-panels .wkp-fig{flex:none;font-size:var(--wkp-fig);white-space:nowrap}
.wk-panels .wkp-fig small{font-size:var(--wkp-small)}
.wk-panels .wkp-label{min-width:0;font-size:var(--wkp-small);line-height:1.35;color:var(--deep);text-wrap:balance}
.wk-panels .wkp-mini,.wk-panels .wkp-plus{display:none}
.wk-panels .wkp-title{margin-top:12px;font-size:var(--wkp-title);font-weight:400;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.wk-panels .wkp-nw{white-space:nowrap}
.wk-panels .wkp-body-in{padding-top:8px}
.wk-panels .wkp-line{max-width:56ch;font-size:var(--wkp-small);line-height:1.5}
.wk-panels .wkp-link{position:relative;display:block;width:max-content;margin-top:16px;font-size:var(--wkp-small);line-height:1.35}
.wk-panels .wkp-link::after{content:"";position:absolute;inset:-12px 0}   /* a 44 px target for a finger; the link's own box stays the words */
@container wk-panels (min-width:520px){
  .wk-panels .wkp-list{gap:16px;--wkp-form:bands;--wkp-pad:20px}
  .wk-panels .wkp-card{flex-direction:row}
  .wk-panels .wkp-photo{aspect-ratio:auto;max-height:none;width:42%}
}
@container wk-panels (min-width:700px){
  .wk-panels .wkp-list{--wkp-pad:24px;--wkp-fig:40px}
}
@container wk-panels (min-width:840px){
  .wk-panels .wkp-list{--wkp-title:24px}
}
/* where the longest figure and its label ("2,500+ equities screened every week", 309 px) can't share a line, the label goes
   under the figure in all of them, so the closed cases keep one height */
@container wk-panels (max-width:343.9px){
  .wk-panels .wkp-stat{display:block}
  .wk-panels .wkp-label{margin-top:8px}
}
@container wk-panels (min-width:520px) and (max-width:603.9px){
  .wk-panels .wkp-stat{display:block}
  .wk-panels .wkp-label{margin-top:8px}
}

/* ---------- the scripted module ---------- */
.wk-panels.wkp-on .wkp-list{--wkp-hc:37.5cqw;--wkp-ho:62.5cqw}
.wk-panels.wkp-on .wkp-panel{--wkp-t:0}
.wk-panels.wkp-on .wkp-card{border-color:var(--edge)}
.wk-panels.wkp-on .is-open .wkp-card{border-color:var(--fathom)}
/* the control: one button over the whole closed panel, outside the card's clip so its focus ring shows. The open panel's
   button stays in the tab order (it says which one is open) but lets the pointer through to the text and the link */
.wk-panels.wkp-on .wkp-open{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:var(--r);background:none;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wk-panels.wkp-on .is-open .wkp-open{pointer-events:none}
/* ...but not while the panels move (.wkp-moving, from the script): the second click of a double click stays on the button,
   so it can't land on the link that is travelling under the pointer, nor select a word */
.wk-panels.wkp-on.wkp-moving .is-open .wkp-open{pointer-events:auto}
.wk-panels.wkp-on .wkp-plus{display:block;position:absolute;right:var(--wkp-pad);top:calc(var(--wkp-pad) + (var(--wkp-detail)*1.3 - 13px)/2);width:13px;height:13px;color:var(--deep);transition:color .25s ease,opacity .25s ease .2s}
.wk-panels.wkp-on .wkp-plus::before,.wk-panels.wkp-on .wkp-plus::after{content:"";position:absolute;background:currentColor}
.wk-panels.wkp-on .wkp-plus::before{left:0;top:6px;width:13px;height:1px}
.wk-panels.wkp-on .wkp-plus::after{left:6px;top:0;width:1px;height:13px}
.wk-panels.wkp-on .is-open .wkp-plus{opacity:0;transition:color .25s ease,opacity .15s ease}
@media (hover:hover){
  .wk-panels.wkp-on .wkp-open:hover + .wkp-card{border-color:var(--fathom)}
  .wk-panels.wkp-on .wkp-open:hover + .wkp-card .wkp-plus{color:var(--fathom)}
}
/* strips: the closed photo is a band of the open one. The text of the case leaves quickly and arrives a beat late */
.wk-panels.wkp-on .wkp-photo{aspect-ratio:auto;max-height:none;height:calc(var(--wkp-hc) + (var(--wkp-ho) - var(--wkp-hc))*var(--wkp-t))}
.wk-panels.wkp-on .wkp-ph img{height:var(--wkp-ho);top:calc(var(--wkp-fy,.5)*(100% - var(--wkp-ho)))}
/* the clip is 8 px wider at each side and 12 px lower than the text, inside the card's own padding: room for the link's
   focus ring and its target. Every case's line is held at the longest one's number of lines (--wkp-ln, from the script), so
   a link after it would sit at the same place in every case */
.wk-panels.wkp-on .wkp-body{box-sizing:content-box;height:calc(var(--wkp-bh,0px)*var(--wkp-t));padding:0 8px 12px;margin:0 -8px -12px;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .15s ease,visibility 0s linear .15s}
.wk-panels.wkp-on .wkp-line{min-height:calc(var(--wkp-ln,0)*1.5em)}
.wk-panels.wkp-on .is-open .wkp-body{opacity:1;visibility:visible;transition:opacity .25s ease .15s,visibility 0s}
@container wk-panels (min-width:520px){
  /* bands: the photo takes the band's height; the script gives the picture the open band's height (--wkp-ih) */
  .wk-panels.wkp-on .wkp-photo{height:auto}
  .wk-panels.wkp-on .wkp-ph img{height:var(--wkp-ih,100%);top:calc(var(--wkp-fy,.5)*(100% - var(--wkp-ih,100%)))}
}
@container wk-panels (min-width:1184px){
  /* the row, from a 1280 window: under that the narrow panels' small titles and the open case's line break badly, so the
     bands take over. --wkp-n is a narrow panel, --wkp-o the open one; both are fixed for a given width of the module, so the
     text and the picture can be laid out at the open size whatever the panel's width is at that instant. Sizes follow the
     module's width: 12, 15, 24 and 40 px of type at 1440, in proportion up to 1920; 12, 14, 21 and 36 at 1280. The sector
     is never under 12 px, the page's smallest type. The padding is 16 at 1280, 20 at 1440 and 24 at 1920: under 1440 it
     gives way a little faster, because the small titles need the room */
  .wk-panels.wkp-on .wkp-list{flex-direction:row;gap:var(--wkp-g);--wkp-form:row;--wkp-g:16px;
    --wkp-n:calc((100cqw - 4*var(--wkp-g))/6.6);--wkp-o:calc(100cqw - 4*var(--wkp-g) - 4*var(--wkp-n));   /* five panels: four narrow, and the open one 2.6 of a narrow */
    --wkp-ph:clamp(244px,22.52cqw,368px);--wkp-pad:clamp(16px,min(calc(1.333cqw + 2.24px),calc(2.7cqw - 16px)),24px);
    --wkp-detail:clamp(12px,.901cqw,15px);--wkp-small:clamp(14px,1.126cqw,19px);--wkp-title:clamp(20px,1.802cqw,30px);--wkp-fig:clamp(34px,3.003cqw,50px);
    --wkp-s1:clamp(6px,calc(1.333cqw - 9.76px),12px);--wkp-s2:clamp(12px,calc(1.333cqw - 1.76px),20px);--wkp-s3:clamp(8px,calc(1.333cqw - 5.76px),16px)}
  /* every panel may give or take a hair, so the row is always exactly full */
  .wk-panels.wkp-on .wkp-panel{flex:1 1 calc(var(--wkp-n) + (var(--wkp-o) - var(--wkp-n))*var(--wkp-t))}
  .wk-panels.wkp-on .wkp-card{flex-direction:column}
  .wk-panels.wkp-on .wkp-photo{width:auto;height:var(--wkp-ph)}
  .wk-panels.wkp-on .wkp-ph img{top:0;height:100%;width:calc(var(--wkp-o) - 2px);left:min(0px,calc(var(--wkp-fx,.5)*(100% - (var(--wkp-o) - 2px))))}
  .wk-panels.wkp-on .wkp-text{flex:1 0 auto;display:grid;grid-template-columns:calc(var(--wkp-n) - 2px) minmax(0,1fr);width:calc(var(--wkp-o) - 2px);padding:0}
  .wk-panels.wkp-on .wkp-key{position:relative;padding:var(--wkp-pad)}
  .wk-panels.wkp-on .wkp-sector{padding-right:0}
  .wk-panels.wkp-on .wkp-sector span{display:block}
  .wk-panels.wkp-on .wkp-sector .wkp-dot{display:none}
  .wk-panels.wkp-on .wkp-plus{top:calc(var(--wkp-pad) + var(--wkp-detail)*1.3 + (var(--wkp-detail)*1.3 - 13px)/2)}   /* on the sector's second line: the first can be as wide as the panel */
  .wk-panels.wkp-on .wkp-stat{display:block;margin-top:var(--wkp-s2)}
  .wk-panels.wkp-on .wkp-label{margin-top:var(--wkp-s1);min-height:2.7em}
  .wk-panels.wkp-on .wkp-mini{display:block;margin-top:var(--wkp-s2);font-size:var(--wkp-small);line-height:1.35;text-wrap:pretty;transition:opacity .25s ease .2s}
  .wk-panels.wkp-on .is-open .wkp-mini{opacity:0;transition:opacity .15s ease}
  .wk-panels.wkp-on .wkp-more{display:flex;flex-direction:column;min-width:0;padding:var(--wkp-pad) var(--wkp-pad) var(--wkp-pad) var(--wkp-s3);opacity:0;transition:opacity .15s ease}
  .wk-panels.wkp-on .is-open .wkp-more{opacity:1;transition:opacity .25s ease .15s}
  .wk-panels.wkp-on .wkp-title{margin-top:-.1em}         /* its capitals top out with the sector's */
  .wk-panels.wkp-on .wkp-body,.wk-panels.wkp-on .is-open .wkp-body{box-sizing:border-box;flex:1 1 auto;display:flex;height:auto;padding:0;margin:0;overflow:visible;opacity:1}
  .wk-panels.wkp-on .wkp-body-in{flex:1 1 auto;display:flex;flex-direction:column;padding-top:var(--wkp-s3)}
  .wk-panels.wkp-on .wkp-line{margin-bottom:var(--wkp-s2)}
  .wk-panels.wkp-on .wkp-link{margin-top:auto;align-self:flex-start}
}
/* the page's 24 gutter between the panels from a 1362 window (the common 1366 has it). Under that, 24 would leave the small
   titles no room for two lines, so the gap is 16 */
@container wk-panels (min-width:1260px){
  .wk-panels.wkp-on .wkp-list{--wkp-g:24px}
}
/* ---------- the phone's form: a row to swipe (Xavi, 5 Oct 2026: the stacked bands "need to be rethought") ----------
   Under 520 px of module the cases stand side by side, every one told in full: photo, sector, figure and label, title and
   line. Each is 84% of the column, so the next shows at the edge; the row runs to the screen's edges and snaps case by
   case, on the browser's own scrolling. Over it, the results are an index: all the proof is on screen at rest, the rule
   over the one in view is filled, and a tap on a figure brings its case. Nothing opens or closes here, so the accordion's
   moving sizes are switched off. Without the script the cases are still a row to swipe, with no index. */
.wk-panels .wkp-index{display:none}
@container wk-panels (max-width:519.9px){
  .wk-panels .wkp-list,.wk-panels.wkp-on .wkp-list{flex-direction:row;gap:12px;--wkp-form:pager;--wkp-fig:40px;
    margin-inline:calc(-1*var(--m));padding-inline:var(--m);overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--m);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .wk-panels .wkp-list::-webkit-scrollbar{display:none}
  .wk-panels .wkp-panel{flex:0 0 84%;scroll-snap-align:start}
  .wk-panels.wkp-on .wkp-card{border-color:var(--fathom)}
  .wk-panels.wkp-on .wkp-open,.wk-panels.wkp-on .wkp-plus{display:none}
  .wk-panels .wkp-photo,.wk-panels.wkp-on .wkp-photo{aspect-ratio:3/2;max-height:none;height:auto}
  .wk-panels.wkp-on .wkp-ph img{height:100%;top:0}
  html.motion .wk-panels .wkp-ph.rv{opacity:1;transform:none}        /* a photo that only peeks would never count as seen */
  .wk-panels .wkp-text{display:flex;flex-direction:column}
  .wk-panels .wkp-sector{padding-right:0}
  .wk-panels .wkp-stat{display:block;margin-top:16px}
  .wk-panels .wkp-label{margin-top:8px}
  .wk-panels .wkp-title{margin-top:20px}
  .wk-panels .wkp-more{flex:1 1 auto;display:flex;flex-direction:column}
  .wk-panels .wkp-body,.wk-panels.wkp-on .wkp-body,.wk-panels.wkp-on .is-open .wkp-body{flex:1 1 auto;display:flex;box-sizing:border-box;height:auto;padding:0;margin:0;overflow:visible;opacity:1;visibility:visible;transition:none}
  .wk-panels .wkp-body-in{flex:1 1 auto;display:flex;flex-direction:column}
  .wk-panels.wkp-on .wkp-line{min-height:0}
  .wk-panels .wkp-link{margin-top:auto;padding-top:20px}
  /* the index, as tabs (Xavi, 6 Oct 2026: he liked it, but it wasn't obvious the figures could be chosen). A tab is a figure
     with its sector under it, both centred; one hairline runs under the row, between the tabs and the cases they bring; and
     one Fathom bar glides along it to the tab in view, as you swipe or tap. A tab answers a finger with Sea Foam. Until then
     the figures stood left in their cells under a hairline whose part over the one in view was filled: it read as a rail */
  .wk-panels.wkp-on .wkp-index{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:0 0 20px;padding:0;list-style:none;border-bottom:1px solid var(--edge)}
  .wk-panels.wkp-on .wkp-index::after{content:"";position:absolute;left:0;bottom:-1px;width:calc(100%/var(--wkp-tabs,4));height:2px;background:var(--fathom);
    transform:translateX(calc(var(--wkp-at,0)*100%));transition:transform .4s cubic-bezier(.2,.7,.2,1)}
  .wk-panels .wkp-index button{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;min-height:56px;padding:10px 2px 12px;
    border-radius:var(--r) var(--r) 0 0;color:var(--deep);text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .25s ease,background-color .2s ease}
  .wk-panels .wkp-index button b{display:block;font:500 18px/1 var(--font);letter-spacing:-.01em;font-variant-numeric:lining-nums proportional-nums;white-space:nowrap}
  .wk-panels .wkp-index button b small{font-size:12px;font-weight:400;letter-spacing:0;margin-left:3px}
  .wk-panels .wkp-index button span{display:block;font-size:12px;line-height:1.2}
  .wk-panels .wkp-index button[aria-current="true"]{color:var(--fathom)}
  .wk-panels .wkp-index button:active{background:var(--foam)}
  .wk-panels .wkp-index button:focus-visible{outline:2px solid var(--deep);outline-offset:-2px}
}
@media (prefers-reduced-motion:reduce){
  .wk-panels .wkp-index button,.wk-panels.wkp-on .wkp-index::after{transition:none}
  .wk-panels .wkp-card,.wk-panels.wkp-on .wkp-plus,.wk-panels.wkp-on .is-open .wkp-plus,.wk-panels.wkp-on .wkp-body,.wk-panels.wkp-on .is-open .wkp-body,
  .wk-panels.wkp-on .wkp-mini,.wk-panels.wkp-on .is-open .wkp-mini,.wk-panels.wkp-on .wkp-more,.wk-panels.wkp-on .is-open .wkp-more{transition:none}
}