/* What’s inside pop-up (study started 7 October 2026). Loaded by the shop since 7 October 2026 (the phone's window for a
   bundle and a Smart Bundle) and so by every comparison preview.
   What each version is, and how it is wired, is at the top of inside-studies.js.
   The window's shape, head and foot are the Learn more window's own (learnmore-studies.css, which the shop loads): the
   dialog carries data-lm="pages" and the root the class lm. Everything here starts from data-wi or a wi- class.
   The pick for a subject bundle is Opens in place; the versions differ only in a Smart Bundle's subjects.
   Made at 390px wide and checked at 320px. No laptop rules yet. */

/* ---- The window: the body is the one thing that scrolls ---- */
[data-wi] .wi-body{position:relative;flex:1;min-height:0;padding:0;overflow-y:auto;overscroll-behavior:contain}
[data-wi] .lm-price del{text-decoration-thickness:1px}
.wi-sums{padding:18px 16px 20px}
.wi-sums .lm-sums{margin:0}

/* ---- A sheet's line: its cover, its name, its pages and topics ---- */
.wi-row{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:6px 12px 6px 8px;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wi-row-text{flex:1;min-width:0}
.wi-row-text b{display:block;font:600 15.5px/1.3 var(--sans);text-wrap:pretty}
.wi-row-text small{display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px;margin-top:3px;font:400 13.5px/1.35 var(--sans);color:var(--muted)}
.wi-row .lm-chev,.wi-sub-head .lm-chev{flex:none}
/* Owned: quiet, in the shop's green, as the settled badge in the shop's list is. */
.wi-own{display:inline-flex;align-items:center;gap:4px;padding:1px 8px 1px 6px;border:1.5px solid var(--green);border-radius:8px;color:var(--green);font:600 12.5px/1.35 var(--sans);white-space:nowrap}
.wi-tick{width:13px;height:13px;stroke-width:2.6}
.wi-row.is-owned .wi-row-text b{color:var(--muted)}

/* ---- Opens in place: a card per sheet; the inside slides open, and shut nothing in it can be reached ---- */
.wi-cards{display:grid;gap:8px;padding:12px 16px 0}
.wi-card{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;transition:border-color .2s var(--ease)}
.wi-card.is-open{border-color:var(--line-strong)}
.wi-item.is-open>.wi-row .lm-chev,.wi-sub.is-open>.wi-sub-head .lm-chev{transform:rotate(180deg)}
.wi-fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s var(--ease)}
.is-open>.wi-fold{grid-template-rows:1fr}
.wi-fold-in{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s .26s}
.is-open>.wi-fold>.wi-fold-in{visibility:visible;transition-delay:0s}
@media (prefers-reduced-motion:reduce){.wi-fold,.wi-fold-in,.wi-card,.wi-sub{transition:none}}
/* A sheet's insides: three pages and every topic, as the Learn more window shows them. */
.wi-strip{--w:calc((100vw - 78px)/3);display:flex;gap:10px;padding:14px 12px 12px;border-top:1px solid var(--line)}
.wi-strip figure{flex:none;width:var(--w);margin:0}
.wi-strip figcaption{margin-top:8px;font-size:13px;line-height:1.3;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wi-pagebtn{display:block;padding:0;border:0;background:none;cursor:zoom-in}
.wi-list-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 12px 6px}
.wi-list-head h4{margin:0;font:600 16.5px/1.25 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.wi-list-head small{font-size:13px;color:var(--muted)}
.wi-topics{list-style:none;margin:0;padding:0 0 4px;counter-reset:wi}
.wi-topics li{counter-increment:wi;display:flex;gap:10px;padding:8px 12px;font-size:15px;line-height:1.35;color:var(--ink)}
.wi-topics li+li{border-top:1px solid var(--line)}
.wi-topics li::before{content:counter(wi);flex:none;width:20px;font-weight:700;font-size:13.5px;line-height:1.5;color:var(--green)}

/* ---- A page seen large: the Learn more window's Dark viewer ---- */
.wi-pv{--big:min(calc(100vw - 32px),calc((100dvh - 190px)/1.414));position:fixed;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;background:rgba(9,24,15,.94);color:#fff;animation:wi-fade .18s ease-out;touch-action:pan-y}
.wi-pv.is-still{animation:none}
@keyframes wi-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.wi-pv{animation:none}}
.wi-veil-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;align-self:stretch;flex:none;min-height:60px;padding:8px 12px 8px 20px}
.wi-veil-bar b{min-width:0;font:600 16px/1.3 var(--sans)}
.wi-pv .lm-round{background:#ffffff24;color:#fff}
.wi-pv .lm-round:disabled{opacity:.35}
.wi-veil-steps{display:flex;align-items:center;gap:22px;flex:none;padding:12px 0 calc(16px + env(safe-area-inset-bottom,0px));font:600 15px/1 var(--sans)}
.wi-pv-page{--w:var(--big);flex:none;width:var(--big);margin:auto 0}
.wi-pv-page .lm-mock{width:100%;border:0}

/* ==== A Smart Bundle's subjects, five ways ==== */
/* The shop's own word over a choice, as over the Grade and Subject menus in its header. */
.wi-label{display:block;margin-bottom:6px;font:600 13.5px/1.2 var(--sans);color:var(--muted)}

/* ---- Tabs, as it was: one row in the shop's own tab look, staying in view ---- */
.wi-tabs{position:sticky;top:0;z-index:2;display:flex;gap:6px;padding:12px 16px 10px;border-bottom:1px solid var(--line);background:#fff;overflow-x:auto;scrollbar-width:none}
.wi-tabs::-webkit-scrollbar{display:none}
.wi-tabs button{flex:1 1 0;min-width:0;min-height:52px;padding:6px 6px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font:600 14px/1.15 var(--sans);cursor:pointer}
.wi-tabs small{display:block;margin-top:3px;font:400 12.5px/1.2 var(--sans);color:var(--muted)}
.wi-tabs button[aria-expanded="true"]{border-color:var(--forest);background:var(--forest);color:#fff}
.wi-tabs button[aria-expanded="true"] small{color:#ffffffcc}
.wi-tabs.is-many button{flex:none;min-width:104px;padding:6px 12px;white-space:nowrap}

/* ---- Subject buttons: as wide as their words, on as many lines as they need, all in view ---- */
.wi-pick{padding:12px 16px 4px}
.wi-tabs.is-wrap{position:static;flex-wrap:wrap;gap:8px;padding:0;border:0;overflow:visible}
.wi-tabs.is-wrap button{flex:none;min-height:44px;padding:6px 14px;font-size:15px;white-space:nowrap}
.wi-tabs.is-wrap small{display:inline;margin:0 0 0 7px;font-size:14px}

/* ---- Subject menu: the shop's own menu, staying at the top of the window ---- */
.wi-menu{position:sticky;top:0;z-index:3;padding:12px 16px 12px;border-bottom:1px solid var(--line);background:#fff}
.wi-menu .dd-button{display:flex;width:100%}
.wi-menu .dd-value{display:flex;align-items:baseline;gap:10px;font-weight:600}
.wi-menu .dd-value small,.wi-menu .dd-option small{font:400 14px/1.2 var(--sans);color:var(--muted)}
.wi-menu .dd-option>span{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px}
.wi-menu .dd-value small,.wi-menu .dd-option small{white-space:nowrap}
.wi-menu .dd-option[aria-selected="true"] small{color:inherit}
/* Its list opens under it, inside the window (the shop's own opens on the page, which a window covers). */
.wi-menu .dd-panel{position:absolute;top:calc(100% - 6px);left:16px;right:16px;z-index:4;max-height:min(360px,calc(100dvh - 380px))}

/* ---- One list: a heading per subject that stays in view, and the subjects at the top to jump by ---- */
.wi-jump{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px 2px}
.wi-jump button{min-height:44px;padding:6px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font:500 14px/1.2 var(--sans);white-space:nowrap;cursor:pointer}
.wi-jump small{margin-left:7px;font:inherit;color:var(--muted)}
.wi-ghead{position:sticky;top:0;z-index:1;display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;padding:16px 20px 9px;border-bottom:1px solid var(--line);background:#fff}
.wi-ghead span{font:600 17.5px/1.25 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.wi-ghead small{flex:none;font:400 13px/1.3 var(--sans);letter-spacing:0;color:var(--muted)}

/* ---- Subjects open: a card per subject that opens to its sheets; a sheet opens in turn. One surface per card. ---- */
.wi-subs{display:grid;gap:8px;padding:12px 16px 0}
.wi-sub{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:clip;transition:border-color .2s var(--ease)}
.wi-sub.is-open{border-color:var(--line-strong)}
/* The subject's name stays at the top of the window while its sheets pass. */
.wi-sub-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:8px 12px 8px 8px;border:0;border-radius:11px;background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wi-sub.is-open>.wi-sub-head{border-radius:11px 11px 0 0;box-shadow:0 1px 0 var(--line)}
.wi-sub-head .wi-row-text b{font:600 17.5px/1.25 var(--serif);letter-spacing:-.01em}
.wi-rows{list-style:none;margin:0;padding:0}
.wi-rows li+li{border-top:1px solid var(--line)}
/* A sheet's line sits in from the subject's, and the open sheet is on the soft ground. */
.wi-sub .wi-row{padding-left:20px}
.wi-sub .wi-item{transition:background-color .2s var(--ease)}
.wi-sub .wi-item.is-open{background:var(--soft)}
.wi-sub .wi-strip{--w:calc((100vw - 98px)/3);padding:14px 12px 12px 20px;border-top-color:#17281e14}
.wi-sub .wi-list-head{padding-left:20px}
.wi-sub .wi-topics li{padding-left:20px}
.wi-sub .wi-topics li+li{border-top-color:#17281e14}

/* ==== Laptop (wider than 600px). DECIDED 8 October 2026: Full screen · Look inside ("Full screen look inside is the one,
   lock it in. Delete the others to avoid confusion"). A whole screen in place of the window; the dialog carries
   data-wi-pc="flook" and data-lm="pc-wi". Every other laptop design is deleted (inside-studies.js lists them). ==== */
@media (min-width:601px){
 #detailDialog[data-wi-pc="flook"]{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border-radius:0;animation:wi-fade .16s ease-out}
 #detailDialog[data-wi-pc="flook"] h2{margin:0;font-size:24px}
 .wi-full{display:flex;flex-direction:column;height:100%;min-height:0}

 /* The bar: Back, the bundle's name, the price, the heart and Add. Always in view. */
 .wi-bar{flex:none;display:flex;align-items:center;gap:28px;padding:12px 28px;border-bottom:1px solid var(--line);background:#fff}
 .wi-back{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:40px;margin:0;padding:0 14px 0 10px;border:1px solid var(--line-strong);border-radius:999px;background:none;color:var(--ink);font:500 15px/1.2 var(--sans);cursor:pointer}
 .wi-back:hover{background:var(--soft)}
 .wi-back .lm-i{width:16px;height:16px}
 .wi-bar-name{flex:1;min-width:0}
 .wi-bar-name .lm-facts{margin-top:6px}
 .wi-bar-buy{flex:none;display:flex;align-items:center;gap:14px}
 .wi-bar-buy .lm-price{flex:none;margin-right:6px;text-align:right}
 .wi-bar .lm-btn{min-width:190px}

 /* Three columns: the sheets (under the phone's Subject menu for a Smart Bundle), one page large on the soft ground,
    the sheet's name and topics. */
 .wi-look{flex:1;min-height:0;display:grid;grid-template-columns:372px minmax(0,1fr) 352px}
 .wi-look-list{display:flex;flex-direction:column;min-height:0;overflow-y:auto;padding:0 12px 16px;border-right:1px solid var(--line)}
 .wi-look-list>.wi-label{display:block;margin:0;padding:20px 12px 10px;font:600 13px/1.2 var(--sans);color:var(--muted)}
 .wi-flook .wi-menu{margin:0 -12px 10px;padding:16px 24px 14px}
 .wi-flook .wi-menu .dd-panel{left:24px;right:24px;max-height:calc(100dvh - 230px)}
 /* The sheets: lines with no rules between them; the chosen one is a mint pill. */
 .wi-flook .wi-picks{display:grid;gap:2px}
 .wi-flook .wi-picks li+li{border-top:0}
 .wi-flook .wi-picks .wi-row{min-height:56px;padding:6px 12px;border-radius:10px;transition:background-color .12s}
 .wi-flook .wi-picks .wi-row:hover{background:var(--soft)}
 .wi-flook .wi-picks .lm-cv{width:32px}
 .wi-flook .wi-picks .wi-row-text b{font-size:15px}
 .wi-flook .wi-picks .wi-row-text small{margin-top:1px;font-size:13px}
 .wi-flook .wi-picks .wi-item.is-open .wi-row{background:var(--mint)}
 .wi-flook .wi-picks .wi-item.is-open .wi-row-text b{color:var(--forest);font-weight:650}
 /* The stage. The thumbs are together exactly as tall as the large page. */
 /* The large page is as tall as the screen allows, and no wider than the stage has room for beside the thumbs. */
 .wi-look-stage>*{--big:min(380px,calc((100dvh - var(--bar,82px) - 80px)/1.414),calc((100cqw - 16px)/1.334))}
 .wi-look-stage{container-type:inline-size;display:flex;align-items:flex-start;justify-content:center;gap:20px;min-width:0;padding:24px 24px 0;background:var(--soft)}
 .wi-look-stage.is-new>*{animation:wi-fade .16s ease-out}
 .wi-thumbs{display:grid;gap:12px}
 .wi-thumb{--w:calc((var(--big)*1.414 - 24px)/4.242);display:block;padding:0;border:0;border-radius:5px;background:none;cursor:pointer}
 .wi-thumb .lm-mock{border-color:transparent;box-shadow:0 0 0 1px #17281e1f,0 2px 6px #17281e14;transition:box-shadow .12s}
 .wi-thumb:hover .lm-mock{box-shadow:0 0 0 2px var(--line-strong),0 2px 6px #17281e14}
 .wi-thumb[aria-pressed="true"] .lm-mock{box-shadow:0 0 0 2.5px var(--green),0 4px 12px #17281e1f}
 .wi-thumb:focus-visible{outline:2px solid var(--green);outline-offset:3px}
 .wi-bigpage{--w:var(--big);margin:0}
 .wi-bigpage .lm-mock{border-color:transparent;box-shadow:0 0 0 1px #17281e17,0 2px 4px #17281e14,0 18px 40px #17281e1f}
 .wi-bigpage figcaption{margin-top:12px;font:600 14.5px/1.3 var(--sans);color:var(--ink);text-align:center}
 /* The sheet's name and topics. Two classes, to outweigh the Learn more study's own rule for the scroller. */
 .wi-look>.wi-look-text{min-width:0;padding:26px 28px 20px;border-left:1px solid var(--line);background:#fff}
 .wi-sheet.is-new{animation:wi-fade .16s ease-out}
 .wi-sheet h3{margin:0;font:600 22px/1.2 var(--serif);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
 .wi-sheet .lm-facts{margin-top:9px}
 .wi-sheet .wi-list-head{padding:18px 0 8px}
 .wi-sheet .wi-topics{padding:0}
 .wi-sheet .wi-topics li{padding:5px 0;border-top:1px solid #17281e14;font-size:14.5px}
 @media (prefers-reduced-motion:reduce){.wi-sheet.is-new,.wi-look-stage.is-new>*{animation:none}}

 /* ---- The bar. --bar is its height, which sizes the large page. As picked it is 82px. ---- */
 .wi-flook{--bar:82px}
 .wi-bar{position:relative;z-index:5}

 /* The heart is after Add, a square as tall as the button (8 October 2026: "the tidied placement for facoriting isbetter"). */
 .wi-bar-buy .lm-heart{width:50px;height:50px;margin-left:-4px;border:1px solid var(--line-strong);border-radius:10px;background:#fff}
 .wi-bar-buy .lm-heart:hover{background:var(--soft)}
 .wi-bar-buy .lm-heart[aria-pressed="true"]{border-color:var(--mint-deep);background:var(--mint)}

 /* How the bar says what is saved, decided 8 October 2026: Was and now ("was and now is the correct one"). The old price
    struck beside the price; "You save R668" in green under them. */
 .wi-bar .lm-price b del{margin-right:4px;font:400 16px/1 var(--sans);letter-spacing:0;color:var(--muted)}
 .wi-bar .lm-price small.wi-saving{font-size:14.5px;font-weight:700;color:var(--green-hover)}
}