/* Learn more pop-up on a phone: Pages and topics, the owner's own design, decided 7 October 2026. Loaded by the shop and by
   compare/learn-more-live.html. What it is, and what was deleted, is at the top of learnmore-studies.js.
   #detailDialog[data-lm] is the shop's own window, redrawn. */

.lm-i{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lm-cv{display:block;width:var(--w);flex:none;overflow:hidden;border:1px solid var(--line);border-radius:5px;background:#fff}

/* ---- The sheet ---- */
#detailDialog[data-lm]{width:100%;max-width:100vw;max-height:calc(100dvh - 20px);margin:auto 0 0;padding:0;border:0;border-radius:20px 20px 0 0;overflow:hidden;background:#fff;font-family:var(--sans);color:var(--ink);animation:lm-up .26s var(--ease)}
@keyframes lm-up{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){#detailDialog[data-lm]{animation:none}}
[data-lm] .lm{position:relative;display:flex;flex-direction:column;flex:1;min-height:0}
[data-lm] .dialog-body{flex:1;min-height:0;padding:0;overflow-y:auto;overscroll-behavior:contain}
[data-lm] .dialog-status:empty{display:none}
.lm-grab{flex:none;width:40px;height:4px;margin:8px auto 0;border-radius:2px;background:var(--line-strong)}

/* ---- Head: the name, a tag, the facts, close ---- */
.lm-head{display:flex;align-items:flex-start;gap:8px;flex:none;padding:12px 12px 14px 20px;border-bottom:1px solid var(--line)}
.lm-head>div{flex:1;min-width:0;margin-right:4px}
#detailDialog[data-lm] h2{margin:0;outline:0;font:600 23px/1.2 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.lm-back{display:inline-flex;align-items:center;gap:8px;min-height:36px;margin-bottom:4px;padding:0;border:0;background:none;color:var(--muted);font:500 15px/1.2 var(--sans);cursor:pointer}
.lm-facts{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:9px 0 0;font-size:14px;line-height:1.4;color:var(--muted)}
.lm-tag{flex:none;padding:3px 8px;border-radius:5px;background:var(--green);color:#fff;font:700 12px/1.35 var(--sans)}
.lm-round{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--soft);color:var(--forest);cursor:pointer}
.lm-hrt{width:21px;height:21px;stroke-width:1.9;transition:transform .16s var(--ease)}
.lm-heart[aria-pressed="true"]{background:var(--mint);color:var(--green)}
.lm-heart[aria-pressed="true"] .lm-hrt{fill:currentColor;transform:scale(1.08)}

/* ---- The pages from inside ---- */
.lm-strip{display:flex;gap:12px;padding:18px 20px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.lm-strip::-webkit-scrollbar{display:none}
.lm-strip figure{flex:none;margin:0}
.lm-strip figcaption{margin-top:9px;max-width:var(--cap,106px);font-size:13px;line-height:1.3;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.is-more .lm-strip{display:none}
.lm-mock{display:flex;flex-direction:column;gap:.55em;width:var(--w);aspect-ratio:210/297;padding:1.5em 1.5em 0;overflow:hidden;border:1px solid var(--line);border-radius:5px;background:#fff;font-size:calc(var(--w)/20)}
.lm-mock i{display:block;flex:none}
.lm-mk-top{display:flex;align-items:center;gap:.5em;margin-bottom:.5em}
.lm-mk-top img{width:1.8em;height:1.8em}
.lm-mk-top b{font:700 1.25em/1 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.lm-mk-top b span{color:var(--green)}
.lm-mk-h{width:46%;height:.6em;border-radius:.2em;background:var(--ink)}
.lm-mk-h.is-title{width:72%;height:.75em}
.lm-mk-g{width:22%;height:.3em;margin-bottom:.5em;border-radius:.15em;background:var(--green)}
.lm-mk-l{width:92%;height:.3em;border-radius:.15em;background:#cdd6d0}
.lm-mk-l.is-s{width:64%}
.lm-mk-table{margin:.5em 0;border:1px solid #cdd6d0}
.lm-mk-table i{height:1.55em}
.lm-mk-table i+i{border-top:1px solid #cdd6d0}
.lm-mk-table i:first-child{background:var(--mint)}
.lm-mk-boxes{display:grid;grid-template-columns:1fr 1fr;gap:.6em;margin:.5em 0 .7em}
.lm-mk-boxes i{height:4.4em;border:1px solid #cdd6d0}
.lm-mk-boxes i+i{background:var(--mint)}
.lm-mk-grid{display:grid;grid-template-columns:repeat(3,1fr);margin:.5em 0;border:1px solid #cdd6d0;border-width:1px 0 0 1px}
.lm-mk-grid i{height:1.7em;border:1px solid #cdd6d0;border-width:0 1px 1px 0}
.lm-mk-grid i:nth-child(-n+3){background:var(--mint)}

/* ---- A bundle's sum ---- */
.lm-sums{margin:16px 20px 0;padding:6px 16px;border-radius:14px;background:var(--mint)}
.lm-sums div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:15.5px;line-height:1.35}
.lm-sums div+div{border-top:1px solid #17281e14}
.lm-sums dt,.lm-sums dd{margin:0}
.lm-sums dd{font-weight:600;white-space:nowrap}
.lm-sums .is-save{color:var(--green-hover);font-weight:600}

/* ---- What it covers ---- */
.lm-list-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:20px 20px 8px}
.lm-list-head h3{margin:0;font:600 18px/1.25 var(--serif);letter-spacing:-.01em}
.lm-list-head small{font-size:13px;color:var(--muted)}
.lm-topics{list-style:none;margin:0;padding:0;counter-reset:lm}
.lm-topics li{counter-increment:lm;font-size:15.5px;line-height:1.35}
.lm-topics li+li{border-top:1px solid var(--line)}
.lm-topics li>span,.lm-topics li>button{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:10px 20px}
.lm-topics li>span{min-height:42px;padding-top:8px;padding-bottom:8px}
.lm-topics li>span::before,.lm-topics li>button::before{content:counter(lm);flex:none;width:22px;font-weight:700;font-size:14px;color:var(--green)}
.lm-topics button{border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.lm-topics button span{flex:1;min-width:0}
.lm-topics button small{flex:none;font-size:14px;color:var(--muted);white-space:nowrap}
.lm-chev{width:20px;height:20px;color:var(--muted);transition:transform .18s var(--ease)}
.lm:not(.is-more) .lm-topics.is-cut li:nth-child(n+5),.lm:not(.is-more) .lm-topics[data-rows="3"] li:nth-child(n+4),.lm:not(.is-more) .lm-topics[data-rows="2"] li:nth-child(n+3){display:none}
.lm-more{display:flex;align-items:center;gap:8px;width:100%;min-height:46px;padding:8px 20px 8px 54px;border:0;border-top:1px solid var(--line);background:none;color:var(--green);font:700 14.5px/1.3 var(--sans);cursor:pointer}
.lm-more .lm-chev{color:var(--green)}
.lm-more[aria-expanded="true"] .lm-chev{transform:rotate(180deg)}
.lm-note{margin:0;padding:10px 20px 14px 54px;border-top:1px solid var(--line);font-size:14px;line-height:1.45;color:var(--muted)}
/* Closed, the whole sheet is in view and nothing scrolls (fit() in the script sizes the pages); only "Show all" scrolls. */
[data-lm] .lm:not(.is-more):not(.is-tight):not(.is-read):not(.is-grow) .lm-body{overflow:hidden}

/* ---- Foot: the price and Add ---- */
.lm-footer{flex:none;border-top:1px solid var(--line);background:#fff}
.lm-foot{display:flex;align-items:center;gap:12px;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px))}
.lm-price{flex:1;min-width:0}
.lm-price b{display:block;font:650 26px/1.1 var(--serif);letter-spacing:-.01em}
.lm-price b.is-words{font-size:17px;line-height:1.25}
.lm-price small{display:block;margin-top:3px;font-size:13.5px;line-height:1.3;color:var(--muted)}
/* "Send this to a parent" (audit batch 3, item 8, 9 October 2026): a plain text link under Add, at the foot's right edge.
   With it there the row above gives up most of its own space underneath, so the foot grows by one line of text only. */
.sn-send{display:flex;align-items:center;justify-content:flex-end;width:100%;min-height:44px;margin:0;padding:0 20px calc(4px + env(safe-area-inset-bottom,0px));border:0;background:none;color:var(--green-hover);font:600 15px/1.3 var(--sans);text-align:right;text-decoration:underline;text-decoration-color:#8cba9f;text-underline-offset:4px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sn-send:hover{text-decoration-color:currentColor}
.lm-foot:has(+.sn-send){padding-bottom:0}
:is([data-lm="pc-wide"],[data-lm^="pc-page"]) .sn-send{padding:0 28px 6px 24px}
/* The laptop bundle's sharing link also sits immediately below its Add button. */
.wi-bar-action{display:flex;flex-direction:column;align-items:stretch}
.wi-bar-buy .sn-send{width:auto;min-height:44px;padding:0;white-space:nowrap}
.parent-share-actions{display:flex;flex-wrap:wrap;gap:12px}
.parent-copy-status{margin-top:12px}
.parent-copy-status input{display:block;width:100%;margin-top:8px}
.lm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;min-height:50px;padding:10px 20px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--forest);font:600 16px/1.25 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer}
.lm-btn.is-primary{border-color:var(--green);background:var(--green);color:#fff}
.lm-btn.is-added{border-color:var(--mint-deep);background:var(--mint)}

/* ---- Round four: a bigger look at a page, three ways ---- */
.lm-pagebtn{display:block;padding:0;border:0;background:none;cursor:zoom-in}
.lm-look .lm-mock{width:100%;font-size:calc(var(--w)/20)}
.lm-look-page{--w:var(--big);width:var(--big);flex:none}
/* Dark viewer: the page over the sheet on a dark ground, one at a time. */
.lm-look-light{--big:min(calc(100vw - 32px),calc((100dvh - 190px)/1.414));position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;background:rgba(9,24,15,.94);color:#fff;animation:lm-fade .18s ease-out}
@keyframes lm-fade{from{opacity:0}to{opacity:1}}
.lm-look-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;align-self:stretch;flex:none;min-height:64px;padding:10px 12px 10px 20px}
.lm-look-bar b{font:600 16px/1.3 var(--sans)}
.lm-look-light .lm-round{background:#ffffff24;color:#fff}
.lm-look-light .lm-round:disabled{opacity:.35}
.lm-look-light .lm-look-page{margin:auto 0}
.lm-look-light .lm-mock{border:0}
.lm-look-steps{display:flex;align-items:center;gap:22px;flex:none;padding:14px 0 calc(16px + env(safe-area-inset-bottom,0px));font:600 15px/1 var(--sans)}
.lm-round.is-next .lm-i{transform:scaleX(-1)}
/* Bigger in the sheet: the page takes the topics' place; the small pages under it switch. */
.lm.is-grow .lm-strip,.lm.is-grow .lm-list-head,.lm.is-grow .lm-topics,.lm.is-grow .lm-more,.lm.is-grow .lm-note,
.lm.is-read .lm-strip,.lm.is-read .lm-list-head,.lm.is-read .lm-topics,.lm.is-read .lm-more,.lm.is-read .lm-note{display:none}
.lm-look-grow{--big:min(calc(100vw - 40px),calc((100dvh - 430px)/1.414));display:flex;flex-direction:column;align-items:center;padding:6px 20px 16px}
.lm-look-grow .lm-back,.lm-look-top .lm-back{align-self:flex-start;min-height:44px;margin:0;color:var(--forest);font-size:15.5px}
.lm-look-picks{display:flex;gap:10px;margin-top:14px}
.lm-look-picks button{--w:48px;width:48px;padding:0;border:0;border-radius:6px;background:none;outline:2px solid transparent;outline-offset:2px;cursor:pointer}
.lm-look-picks button[aria-pressed="true"]{outline-color:var(--green)}
.lm-look-cap{margin:10px 0 0;font-size:14px;color:var(--muted)}
/* All pages, full height: the sheet rises to the top and the pages lie one under the other. */
#detailDialog[data-lm][data-lm-tall]{height:100dvh;max-height:100dvh;border-radius:0}
.lm-look-read{--w:calc(100vw - 40px);padding:0 20px 24px}
.lm-look-top{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -20px;padding:2px 20px;background:#fff;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
.lm-look-read figure{margin:18px 0 0}
.lm-look-read figcaption{margin-bottom:8px;font:600 15px/1.3 var(--sans)}

/* Dark viewer: sideways swipes are the viewer's own (they change the page). */
.lm-look-light{touch-action:pan-y}

/* ---- Laptop round one (7 October 2026): three windows, on the comparison page only. Wider than 600px. ---- */
#detailDialog[data-lm^="pc-"]{width:min(980px,calc(100vw - 48px));max-width:none;max-height:calc(100dvh - 48px);margin:auto;border-radius:20px;animation:lm-pop .2s var(--ease)}
@keyframes lm-pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes lm-side{from{transform:translateX(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){#detailDialog[data-lm^="pc-"]{animation:none}}
[data-lm^="pc-"] .lm-grab{display:none}
[data-lm^="pc-"] .lm-round{transition:background .15s}
[data-lm^="pc-"] .lm-round:hover{background:var(--mint)}
[data-lm^="pc-"] .lm-look-light{--big:calc((100dvh - 156px)/1.414)}
[data-lm^="pc-"] .lm-look-light .lm-round:hover{background:#ffffff3d}
[data-lm^="pc-"] .lm-look-light .lm-look-page{cursor:default}
/* Wide window and Page first: wider gutters, every topic in view, and the body is the one thing that may scroll. */
:is([data-lm="pc-wide"],[data-lm^="pc-page"]) .lm-head{padding:20px 16px 18px 28px}
#detailDialog:is([data-lm="pc-wide"],[data-lm^="pc-page"]) h2{font-size:27px}
#detailDialog:is([data-lm="pc-wide"],[data-lm^="pc-page"]) .lm .lm-body{overflow-y:auto}
:is([data-lm="pc-wide"],[data-lm^="pc-page"]) .lm-list-head{padding:20px 28px 8px 24px}
:is([data-lm="pc-wide"],[data-lm^="pc-page"]) .lm-topics li{font-size:15px}
:is([data-lm="pc-wide"],[data-lm^="pc-page"]) .lm-topics li>span{min-height:34px;padding:6px 28px 6px 24px}
:is([data-lm="pc-wide"],[data-lm^="pc-page"]) .lm-topics li>button{padding:10px 24px}
:is([data-lm="pc-wide"],[data-lm^="pc-page"]) .lm-topics li>button:hover{background:var(--soft)}
:is([data-lm="pc-wide"],[data-lm^="pc-page"]) .lm-note{padding:10px 28px 14px 58px}
:is([data-lm="pc-wide"],[data-lm^="pc-page"]) .lm-foot{padding:14px 28px 14px 24px}
/* The button is 210px wide where there is room. Just above 600px the column is 300px and the button's fixed 210px left
   the price less room than its figures need, so "R69" ran under the button (audit V-300, 9 October 2026). Now the price
   always keeps the width of its figures, the button gives way down to its own words, and if both still cannot share the
   line (a longer price) the button goes under the price. They can never overlap. */
:is([data-lm="pc-wide"],[data-lm^="pc-page"]) .lm-foot{flex-wrap:wrap}
:is([data-lm="pc-wide"],[data-lm^="pc-page"]) .lm-price{min-width:min-content}
:is([data-lm="pc-wide"],[data-lm^="pc-page"]) .lm-price b:not(.is-words){white-space:nowrap}
:is([data-lm="pc-wide"],[data-lm^="pc-page"]) .lm-btn{flex:1000 0 auto;max-width:210px}
:is([data-lm="pc-wide"],[data-lm^="pc-page"]) .lm-strip{padding:0;border:0;overflow:visible}
:is([data-lm="pc-wide"],[data-lm^="pc-page"]):not([data-lm-type="sheet"]) .lm-strip{flex-wrap:wrap;gap:16px 12px}
:is([data-lm="pc-wide"],[data-lm^="pc-page"]) .lm-sums{margin:20px 0 0}
/* Wide window: the pages beside the topics. */
[data-lm="pc-wide"] .lm-body{display:grid;grid-template-columns:auto minmax(0,1fr)}
[data-lm="pc-wide"] .lm-head{padding-left:28px}
.lm-left{padding:24px 28px;border-right:1px solid var(--line)}
[data-lm="pc-wide"] .lm-strip{gap:14px}
[data-lm="pc-wide"]:not([data-lm-type="sheet"]) .lm-left{width:460px}
[data-lm="pc-wide"] .lm-foot{padding-left:28px}
/* Side panel: the phone window as it is, where the laptop cart opens. */
#detailDialog[data-lm="pc-panel"]{width:480px;height:100dvh;max-height:100dvh;margin:0 0 0 auto;border-radius:16px 0 0 16px;animation:lm-side .23s var(--ease)}
[data-lm="pc-panel"] .lm-head{padding-top:18px}
/* Page first: one page to read on the left; the words and the button on the right. */
#detailDialog[data-lm^="pc-page"]{width:min(1060px,calc(100vw - 48px));height:calc(100dvh - 48px)}
[data-lm^="pc-page"] .lm{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto}
[data-lm^="pc-page"] .lm-head{grid-area:1/2}
[data-lm^="pc-page"] .dialog-status{grid-area:2/2}
[data-lm^="pc-page"] .lm-body{grid-area:3/2}
[data-lm^="pc-page"] .lm-footer{grid-area:4/2}
.lm-stage{grid-area:1/1/-1/2;display:flex;align-items:flex-start;gap:16px;min-height:0;padding:28px;border-right:1px solid var(--line)}
.lm-stage-page{--w:calc((100dvh - 106px)/1.414);flex:none}
.lm-thumbs{display:flex;flex-direction:column;gap:12px;flex:none}
.lm-thumbs button{--w:56px;display:block;padding:0;border:0;border-radius:6px;background:none;outline:2px solid transparent;outline-offset:2px;cursor:pointer}
.lm-thumbs button[aria-pressed="true"]{outline-color:var(--green)}
.lm-stage.is-covers{flex-direction:column;align-items:stretch;gap:0;width:508px;overflow-y:auto}
/* Measured at 1366 by 657: eleven topics in view with nothing to scroll. */
:is([data-lm="pc-wide"],[data-lm^="pc-page"]) .lm-topics li>span{min-height:32px;padding-block:5px}
:is([data-lm="pc-wide"],[data-lm^="pc-page"]) .lm-list-head{padding-top:16px}
#detailDialog[data-lm^="pc-page"] h2{font-size:24px}
/* A bundle in the wide windows: its covers small and unnamed (the list beside them names each one), so the sum stays in view. */
:is([data-lm="pc-wide"],[data-lm^="pc-page"]):not([data-lm-type="sheet"]) .lm-strip figcaption{display:none}
[data-lm="pc-wide"]:not([data-lm-type="sheet"]) .lm-left{width:472px}

/* ---- Laptop round two: Page first on a soft ground (pc-page2). A smaller window; the page is paper on a ground. ---- */
#detailDialog[data-lm="pc-page2"]{width:min(900px,calc(100vw - 48px));height:fit-content}
[data-lm="pc-page2"] .lm-stage{flex-direction:column-reverse;align-items:center;justify-content:center;gap:16px;padding:24px 36px;border-right:0;background:var(--soft)}
/* The page is as tall as the window allows, but never wider than a third of the screen or 340px (a tablet, a tall monitor). */
[data-lm="pc-page2"] .lm-stage-page{--w:min(calc((100dvh - 250px)/1.414),30vw,340px)}
[data-lm="pc-page2"] .lm-stage-page .lm-mock{border:0;border-radius:3px;box-shadow:0 1px 2px #17281e24,0 10px 28px #17281e17}
[data-lm="pc-page2"] .lm-thumbs{flex-direction:row;gap:10px}
[data-lm="pc-page2"] .lm-thumbs button{--w:46px;border-radius:4px}
[data-lm="pc-page2"] .lm-thumbs .lm-mock{border-radius:3px}
[data-lm="pc-page2"] .lm-thumbs button:not([aria-pressed="true"]){opacity:.72}
[data-lm="pc-page2"] .lm-thumbs button:hover{opacity:1}
[data-lm="pc-page2"] .lm-stage.is-covers{flex-direction:column;justify-content:flex-start;width:416px;padding:24px}
[data-lm="pc-page2"] .lm-sums{background:#fff}
/* A bundle between 601 and about 800px (audit batch 2, 9 October 2026). The covers' column was a fixed 416px, which left
   the words 176px at 640: the price hid under the button, "Add bundle" ran off the window and the rows' names lay on
   their page counts. The column now gives way so the words always keep 300px or more (what a single sheet's words get),
   and the covers shrink to stay three across. From 804px wide nothing is different. */
#detailDialog[data-lm="pc-page2"]{--covers:max(248px,min(416px,100vw - 388px))}
[data-lm="pc-page2"] .lm-stage.is-covers{width:var(--covers)}
[data-lm="pc-page2"] .lm-stage.is-covers .lm-cv{--w:min(80px,calc((var(--covers) - 72px)/3)) !important}

/* A real cover as the first page (15 October 2026). */
.lm-mock.is-real{padding:0;display:block;position:relative}
.lm-mock.is-real img{display:block;width:100%;height:100%;object-fit:cover}
.lm-mock.is-real .lm-sharp{position:absolute;inset:0}