/* My library on a phone (study of 5 October 2026): the chosen library (Subjects with the Grade menu), and beside it on the
   comparison page Subjects' first version and Quick list in two versions. Drawn by library-studies.js
   inside the shop's own library page, under the shop's heading and its My sheets / Wishlist / Orders / Rewards tabs. Loaded only by
   compare/my-library-live.html. Designed at 390px and checked at 320px.
   Kept from the phone cart the owner chose: a picture beside every item, 16px names, 14px second lines, white surfaces with
   hairlines, green only for what is still to do. No mint fills, no split-colour cards, no labels above headings. */
.my-sheets-page[data-ls]{padding-bottom:44px}
.my-sheets-page[data-ls] .page-heading{margin-bottom:12px}
.my-sheets-page[data-ls] .account-nav{margin-bottom:0}
/* The four account pages keep their heading and tabs at the same height on a laptop (8 October 2026: "headings were consistent
   in my compare UI, but now its incosistent"). With no sheets yet the page is the shop's own, whose heading stood 8px further
   from the tabs, and its line under the name was 1.4px taller than on the wishlist, orders and rewards pages. */
@media(min-width:601px){
.my-sheets-page .page-heading{margin-bottom:12px}
.my-sheets-page .library-heading-copy p{line-height:1.4}
}
.ls .icon{width:18px;height:18px}
.ls a,.ls button{-webkit-tap-highlight-color:transparent}

/* A sheet's cover, drawn by show-pages.js and sized from its own width. A small cover keeps its title and drawing; the cover's own small print would only be specks. */
.ls-cover{display:block;flex:none;overflow:hidden;border:1px solid var(--line-strong);border-radius:4px;background:#fff}
.ls-cover .pg{display:block}
.ls .pg-cover .cv-title{font-size:var(--cv,5em)}
.ls .pg-cover .pg-top>span,.ls .pg-cover .cv-line,.ls .pg-cover .pg-foot span{visibility:hidden}

/* A subject's name with its grade and count under it (Quick list). */
.ls-head h2{font:600 22px/1.2 var(--serif);letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.ls-head p{margin-top:3px;font-size:14px;line-height:1.4;color:var(--muted)}

/* One line per sheet: its name, its pages and paper, and, until it has been downloaded, that it has not. */
.ls-row-copy{display:grid;gap:1px;min-width:0}
.ls-row-copy b{font:600 16px/1.3 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.ls-row-copy small{font-size:14px;line-height:1.4;color:var(--muted)}
.ls-state{display:inline-flex;align-items:center;gap:4px;font-size:14px;line-height:1.4;color:var(--muted)}
.ls-state.is-new{color:var(--green-hover);font-weight:600}
/* The mark at the end of a row: solid green until the sheet has been downloaded, then a quiet outline. The row is the link. */
.ls-get{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:50%;color:var(--forest);background:#fff}
.ls-get .icon{width:20px;height:20px}
.is-new>.ls-get{border-color:var(--green);background:var(--green);color:#fff}
a:active>.ls-get,button:active>.ls-get,button.ls-get:active{transform:scale(.94)}
.ls-row{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;column-gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.ls-row .ls-cover{align-self:start;margin-top:2px;border-radius:3px}
.ls-line{display:grid;grid-template-columns:minmax(0,1fr) 44px;column-gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line);color:inherit;text-decoration:none}

.ls-note{display:flex;align-items:flex-start;gap:6px;margin-top:30px;font-size:13px;line-height:1.4;color:var(--muted)}
.ls-note .icon{width:15px;height:15px;margin-top:1px}
.ls-browse{display:flex;justify-content:flex-start;width:fit-content;margin-top:2px;font-size:15px}

/* ---------- The rest of a subject ---------- */
/* First version: a heading, the sums and a button. */
.ls-offer{padding:14px 0 4px;border-top:1px solid var(--line)}
.ls-offer-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center}
.ls-offer b{display:block;font:600 16px/1.3 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.ls-offer p{margin-top:2px;font-size:14px;line-height:1.4;color:var(--muted)}
.ls-add{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 15px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--forest);font:600 15px/1 var(--sans)}
.ls-add.is-added{border-color:var(--green);color:var(--green-hover)}
.ls-add:active{transform:scale(.97)}
.ls-missing{list-style:none;margin:10px 0 2px;padding:0;font-size:14px;line-height:1.4;color:var(--muted)}
.ls-missing li{padding:3px 0}
/* One more row: the same grid as a sheet's row, with a plus where the download mark sits and the price written as the cart writes it. */
.ls-more{display:grid;grid-template-columns:minmax(0,1fr) 44px;column-gap:14px;align-items:center;width:100%;padding:12px 0;border-top:1px solid var(--line);background:none;color:inherit;text-align:left}
.ls-more.has-thumb{grid-template-columns:44px minmax(0,1fr) 44px}
.ls-more s{color:var(--quiet)}
.ls-more strong{font-weight:700;color:var(--green-hover)}
.ls-more.is-added small{color:var(--green-hover);font-weight:600}
.is-added>.ls-get{border-color:var(--green);color:var(--green-hover)}
/* In the list the offer has a picture too: the subject's own forest cover, as a stack. */
.ls-more .ls-cover{align-self:start;width:40px;margin:6px 4px 0 0;border-color:var(--forest);border-radius:3px;overflow:visible;box-shadow:2px -2px 0 0 #fff,3px -3px 0 0 var(--forest),5px -5px 0 0 #fff,6px -6px 0 0 var(--forest)}
.ls-more .ls-cover .pg{border-radius:2px}
/* ---------- Quick list ---------- */
/* First version. The chips run to the screen's edges and scroll sideways; the list itself is the only thing that scrolls down. */
.ls-chips{display:flex;gap:8px;margin:14px -20px 0;padding:2px 20px 4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ls-chips::-webkit-scrollbar{display:none}
.ls-chips button,.ls-toggle{display:inline-flex;align-items:center;gap:7px;flex:none;height:44px;padding:0 15px;border:1px solid var(--line-strong);border-radius:50px;background:#fff;color:var(--ink);font:500 15px/1 var(--sans);white-space:nowrap}
.ls-chips button span,.ls-toggle span{font-size:13px;color:var(--muted)}
.ls-chips [aria-pressed="true"],.ls-toggle[aria-pressed="true"]{border-color:var(--forest);background:var(--forest);color:#fff}
.ls-chips [aria-pressed="true"] span,.ls-toggle[aria-pressed="true"] span{color:#cfe3d6}
:is(.ls--list,.ls--list-menus) .ls-group{margin-top:22px}
.ls--list .ls-chips+.ls-group:not(section){margin-top:12px}
:is(.ls--list,.ls--list-menus) .ls-head{padding-bottom:12px}
.ls--list .ls-group:not(section) .ls-row:first-child{border-top:0}
/* With the shop's menus: Grade and Subject as on the shop's own phone header, then the count and one switch. */
.ls-menus{display:grid;gap:12px;margin-top:18px}
.ls-menus.has-grade{grid-template-columns:132px minmax(0,1fr)}
.ls-menus .field{display:grid;gap:6px;min-width:0;font-size:14px;font-weight:600;color:var(--ink)}
.ls-menus select{width:100%;min-height:48px;font-size:16px}
.ls-tally{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-top:12px}
.ls-tally p{font-size:14px;line-height:1.4;color:var(--muted)}
.ls-toggle{height:40px;padding:0 14px}
.ls--list-menus .ls-tally+.ls-group{margin-top:10px}
.ls-none{margin-top:18px;font-size:16px;color:var(--muted)}

/* ---------- Subjects ---------- */
.ls-subjects{display:grid;gap:12px;margin-top:20px}
.ls-subject{border:1px solid var(--line-strong);border-radius:14px;background:#fff}
.ls-subject-head{display:grid;grid-template-columns:54px minmax(0,1fr) 20px;column-gap:16px;align-items:center;width:100%;padding:16px 16px 16px 18px;border-radius:14px;background:none;color:inherit;text-align:left}
/* A subject is a stack of its sheets: the first one owned on top. */
.ls-stack{display:block;padding:7px 7px 0 0}
.ls-stack .ls-cover{overflow:visible;box-shadow:3px -3px 0 -1px #fff,3px -3px 0 0 var(--line-strong),6px -6px 0 -1px #fff,6px -6px 0 0 var(--line-strong)}
.ls-stack .pg{border-radius:3px}
.ls-subject-copy{display:grid;gap:3px;min-width:0}
.ls-subject-copy b{font:600 20px/1.2 var(--serif);letter-spacing:-.025em;color:var(--ink)}
.ls-subject-copy>span{font-size:14px;line-height:1.4;color:var(--muted)}
/* One pip for every sheet in the subject: green for the ones in the library. */
.ls-pips{display:flex;gap:4px;margin-top:5px}
.ls-pips i{flex:0 1 18px;height:5px;border-radius:3px;background:var(--line)}
.ls-pips i.is-owned{background:var(--green)}
.ls-subject-copy em{margin-top:5px;font-style:normal;font-size:14px;font-weight:600;line-height:1.4;color:var(--green-hover)}
.ls-subject-head>.icon{width:20px;height:20px;color:var(--forest);transition:transform .16s}
.is-open>.ls-subject-head>.icon{transform:rotate(180deg)}
.ls-subject-body{padding:0 16px 10px 18px}
.ls-subject-body.is-leaving{pointer-events:none}
.ls-subject-body>:last-child:is(.ls-line,.ls-more){padding-bottom:6px}

/* A heading per grade, newest first. */
.ls-gradeblock{margin-top:30px}
.ls-gradeblock:first-child{margin-top:22px}
.ls-grade h2{font:600 24px/1.2 var(--serif);letter-spacing:-.03em;color:var(--ink)}
.ls-grade p{margin-top:3px;font-size:14px;line-height:1.4;color:var(--muted)}
.ls-gradeblock .ls-subjects,.ls-grade+.ls-subjects{margin-top:14px}
/* The Grade menu: narrow and on the left, so it reads as a filter. All grades keeps a heading per grade; one grade shows its cards straight under the menu. */
.ls-grademenu{position:relative;margin-top:18px}
.ls-grademenu select{min-height:48px;font-size:16px}
.ls-grademenu .dd-button{width:176px}
.ls-grademenu+.ls-subjects{margin-top:16px}
.ls-grademenu+.ls-gradeblock{margin-top:24px}

/* ---------- "Not in your library yet": which sheets a subject is missing, and what they cost (the chosen library) ---------- */
.ls-lack-head{margin-top:4px;padding-top:18px;border-top:1px solid var(--line);font:600 15px/1.3 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.ls-subject-body>.ls-lack-head:first-child{margin-top:0}
/* Each missing sheet: its small cover, its name and pages, its price. A picture beside what is for sale, as in the shop and the cart. */
.ls-bill{list-style:none;margin:6px 0 0;padding:0}
.ls-bill li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;column-gap:12px;align-items:center;padding:7px 0}
.ls-bill .ls-cover{border-radius:2px}
.ls-bill li>span>b{display:block;font:500 15px/1.35 var(--sans);color:var(--ink)}
.ls-bill li>span>small{display:block;font-size:13px;line-height:1.4;color:var(--muted)}
.ls-bill li>span:last-child{font-size:15px;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums}
/* Then one row, as the phone cart's foot is written: the price, the single price struck and the saving on the left; the one
   solid green button of an open subject on the right, as "Go to checkout" is in the cart. */
.ls-payrow{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:8px;padding:14px 0 8px;border-top:1px solid var(--line)}
.ls-payrow p{display:flex;align-items:baseline;gap:8px}
.ls-payrow strong{font:700 22px/1.15 var(--sans);letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.ls-payrow s{font-size:15px;color:var(--quiet);font-variant-numeric:tabular-nums}
.ls-payrow span{display:block;margin-top:2px;font-size:14px;font-weight:600;line-height:1.3;color:var(--green-hover)}
.ls-pay{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;height:50px;padding:0 20px;border:1px solid var(--green);border-radius:12px;background:var(--green);color:#fff;font:600 16px/1 var(--sans);white-space:nowrap}
.ls-pay.is-added{background:#fff;color:var(--green-hover)}
.ls-pay:active{transform:scale(.97)}

@media(max-width:360px){
 .ls-chips{margin-inline:-16px;padding-inline:16px}
 .ls-menus.has-grade{grid-template-columns:116px minmax(0,1fr)}
 .ls-subject-head{grid-template-columns:46px minmax(0,1fr) 20px;column-gap:13px;padding:14px 12px 14px 14px}
 .ls-subject-body{padding:0 12px 8px 14px}
 .ls-row,.ls-more.has-thumb{column-gap:12px}
 .ls-pay{padding:0 16px}
 .ls-payrow{gap:10px}
}

/* ---------- Laptop (6 October 2026): Table, with the menus beside the tabs. In comparison previews only. ----------
   The one laptop design left on the page ("Table menus besides tab is the best right now. Get rid of all the rest"). Deleted
   at the owner's word: the phone's subject cards widened (round one), Download first, Shelves, Sheet list in two versions,
   and Table's other versions (menus under the tabs, Compact, Grouped, With what's missing, Subject boxes).
   A white box with hairline rows and a Download button with the word on it (solid green until the sheet has been
   downloaded). Measured at 1366 by 657, where the page's column is 1076px wide. */
.ls--pc{margin-top:24px}
.ls--pc button{cursor:pointer}
.ls--pc .ls-note{margin-top:36px}
.ls-dl{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--forest);font:600 14px/1 var(--sans);white-space:nowrap}
.is-new>.ls-dl{border-color:var(--green);background:var(--green);color:#fff}
a:hover>.ls-dl{border-color:var(--forest)}
a.is-new:hover>.ls-dl{border-color:var(--green-hover);background:var(--green-hover)}
.ls--pc .ls-state{display:inline;white-space:nowrap}
.ls-pcbar{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.ls-pcmenu{position:relative}
.ls-pcmenu select{min-height:48px;font-size:16px}
.ls-pcmenu .dd-button{width:210px}
.ls-pcbar .ls-toggle{margin-left:auto;height:44px}
.ls-pctable{padding:0 24px 4px;border:1px solid var(--line-strong);border-radius:14px;background:#fff}
.ls-pcth,.ls-pctr{display:grid;grid-template-columns:32px minmax(0,2.3fr) minmax(0,1.2fr) 84px 150px 122px;column-gap:18px;align-items:center}
.ls-pcth{padding:16px 0 12px;border-bottom:1px solid var(--line-strong);font:600 14px/1.3 var(--sans);color:var(--muted)}
.ls-pctr{padding:10px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.35;color:var(--ink);text-decoration:none}
.ls-pcth+.ls-pctr{border-top:0}
.ls-pctr .ls-cover{border-radius:2px}
.ls-pctr .ls-state{font-size:15px}
.ls-pctr .ls-dl{justify-self:end}
.ls--pc .ls-toggle span{font-size:14px}
a.ls-pctr:hover b{text-decoration:underline;text-underline-offset:3px}
/* Subjects table (round seven, 7 October 2026): the same box and lines, a line per subject, opening in place. The last two
   columns (status, Download) are the same widths in a subject's line and in a sheet's, so they stay in line when one opens. */
/* --stc is the width of a subject's stack of covers, --shc of a sheet's cover inside. */
.ls--pc{--stc:32px;--shc:28px}
.ls-pcth.is-st,.ls-sthead{grid-template-columns:var(--stc) minmax(0,1fr) 110px 170px 190px 122px}
.ls-st{border-top:1px solid var(--line)}
.ls-pcth+.ls-st{border-top:0}
.ls-st.is-open+.ls-st{border-top-color:var(--line-strong)}
.ls-sthead{display:grid;column-gap:18px;align-items:center;width:100%;padding:11px 0;border:0;background:none;color:var(--ink);font:400 15px/1.35 var(--sans);text-align:left}
.ls-sthead>b{font:600 19px/1.25 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.ls-sthead:hover>b{text-decoration:underline;text-underline-offset:3px}
.ls-sthead>.icon{justify-self:end;width:20px;height:20px;margin-right:8px;color:var(--muted);transition:transform .2s}
.ls-st.is-open>.ls-sthead>.icon{transform:rotate(180deg)}
.ls-sthead .ls-stack{padding:4px 4px 0 0}
.ls-sthead .ls-stack .ls-cover{border-radius:2px;box-shadow:2px -2px 0 -1px #fff,2px -2px 0 0 var(--line-strong),4px -4px 0 -1px #fff,4px -4px 0 0 var(--line-strong)}
.ls-sthead .ls-state{font-size:15px}
.ls-stcount{display:grid;gap:5px}
.ls-stcount .ls-pips{margin:0}
.ls-stcount .ls-pips i{flex:none;width:14px}
.ls-stbody{padding-bottom:10px}
.ls-pctr.is-st{grid-template-columns:var(--stc) var(--shc) minmax(0,1fr) 190px 122px;padding:7px 0}
.ls-pctr.is-st .ls-dl{height:38px}
.ls-stlabel{padding:12px 0 4px calc(var(--stc) + 18px);border-top:1px solid var(--line);font:600 14px/1.4 var(--sans);color:var(--ink)}
.ls-stlabel+.ls-pctr{border-top:0}
.ls-stprice{justify-self:end;padding-right:14px;font:600 15px/1.3 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.ls-stsum{display:flex;align-items:center;justify-content:flex-end;gap:20px;padding:12px 0 2px;border-top:1px solid var(--line)}
.ls-stsum p{display:grid;grid-template-columns:auto auto;column-gap:8px;align-items:baseline;justify-content:end;text-align:right}
.ls-stsum strong{font:700 20px/1.2 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.ls-stsum s{font-size:14px;color:var(--quiet);font-variant-numeric:tabular-nums}
.ls-stsum p span{grid-column:1/-1;font-size:14px;font-weight:600;line-height:1.3;color:var(--green-hover)}
.ls-stsum .ls-pay{height:44px;min-width:122px;padding:0 16px;border-radius:10px;font-size:15px}
/* Round nine ("We might [not] need cover pages inside of the table"): the same table with fewer covers.
   Covers on subjects only: no cover on a sheet inside; a sheet's name starts under its subject's name.
   No covers: none on a subject's line either; the sheets inside are set in by 24px. */
.ls--pc-subjects-stack .is-st>.ls-cover,.ls--pc-subjects-plain .is-st>.ls-cover{display:none}
.ls--pc-subjects-stack .ls-pctr.is-st{grid-template-columns:var(--stc) minmax(0,1fr) 190px 122px}
.ls--pc-subjects-plain .ls-sthead>.ls-stack,.ls--pc-subjects-plain .ls-pcth.is-st>span:first-child{display:none}
.ls--pc-subjects-plain .ls-pcth.is-st,.ls--pc-subjects-plain .ls-sthead{grid-template-columns:minmax(0,1fr) 110px 170px 190px 122px}
.ls--pc-subjects-plain .ls-pctr.is-st{grid-template-columns:6px minmax(0,1fr) 190px 122px}
.ls--pc-subjects-plain .ls-stlabel{padding-left:24px}
.ls--pc-subjects-plain .ls-sthead{padding:14px 0}
/* On a wide window the menus sit on the line of the My sheets / Wishlist / Orders tabs, so the table starts higher. */
@media(min-width:1280px){
 .ls--pc{position:relative}
 .ls--pc>.ls-pcbar{position:absolute;right:0;bottom:calc(100% + 30px);margin:0;gap:10px}
 .ls--pc>.ls-pcbar select{min-height:44px}
 .ls--pc>.ls-pcbar .dd-button{width:176px}
 .ls--pc>.ls-pcbar .ls-toggle{margin-left:0}
}
/* The table's subject, grade and status as one line under the sheet's name: only where the columns are folded away (below). */
.ls-tabmeta{display:none}
/* Narrower than a laptop (601 to 999px): not arranged yet; the columns fold so nothing runs off the side. Each sheet keeps
   its subject, grade and written download status, on a line under its name (audit V-201). */
@media(max-width:999px){
 .ls-pctr .ls-tabmeta{display:block}
 .ls-pctr .ls-tabmeta .ls-state{font-size:inherit;white-space:nowrap}
 .ls-pcbar{flex-wrap:wrap}
 .ls-pcth{display:none}
 .ls-pctr{grid-template-columns:32px minmax(0,1fr) auto}
 .ls-pctr>span:not(.ls-cover,.ls-row-copy,.ls-dl,.ls-stprice){display:none}
 .ls-pctable>.ls-pctr:first-child{border-top:0}
 .ls-sthead{grid-template-columns:var(--stc) minmax(0,1fr) auto 20px}
 .ls-sthead>span:not(.ls-stack,.ls-stcount){display:none}
 .ls-pctr.is-st{grid-template-columns:var(--shc) minmax(0,1fr) auto}
 .ls-stlabel,.ls--pc-subjects-plain .ls-stlabel{padding-left:0}
 .ls--pc-subjects-stack .ls-pctr.is-st,.ls--pc-subjects-plain .ls-pctr.is-st{grid-template-columns:minmax(0,1fr) auto}
 .ls--pc-subjects-plain .ls-sthead{grid-template-columns:minmax(0,1fr) auto 20px}
}

/* A subject with many sheets (16 October 2026; the owner: "i can scroll sideways on mobile somehow"): 96 dots with 4px
   gaps made the row 380px wide and pushed the page past the screen. The card's text column now never grows past its
   cell, and from 25 sheets the dots join into one bar, green for what is owned. Smaller subjects keep their dots. */
.ls-subject-copy{grid-template-columns:minmax(0,1fr)}
.ls-pips:has(> i:nth-child(25)){gap:0;border-radius:3px;overflow:hidden;min-width:0}
.ls-pips:has(> i:nth-child(25)) > i{flex:1 1 0;min-width:0;border-radius:0}