/* Navbar. Loaded by the shop since 8 October 2026 (the picks are listed at the top of navbar-studies.js). The designs are listed in navbar-studies.js.
   Each design is switched on by data-nv on <html>; the shop's own rules are in mobile-navbar.css. */
.nv-icon{display:block;flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---- Round two: the bar. data-nb is how it is arranged, data-nw how the name is written (navbar-studies.js). ---- */
:root{--nb-edge:16px}
@media(min-width:480px){:root{--nb-edge:24px}}
/* The name: round three, its weight and its letters (the shop's own is the serif at 700) */
[data-nw="semi"] .site-header .brand{font-weight:600}
[data-nw="thin"] .site-header .brand{font-weight:500}
[data-nw="sansbold"] .site-header .brand{font-family:var(--sans);font-weight:700;letter-spacing:-.015em}
[data-nw="sans"] .site-header .brand{font-family:var(--sans);font-weight:600;letter-spacing:-.01em}
/* The name: round two's ways, off the page */
[data-nw="green"] .site-header .brand .nb-s{font-size:inherit;color:var(--green)}
[data-nw="dot"] .site-header .brand .brand-dot,[data-nw="word"] .site-header .brand .brand-dot{display:inline;color:var(--green)}
[data-nw="word"] .site-header .brand .v2-mobile-mark{display:none}
[data-nw="word"] .site-header .brand{font-size:25px}
[data-nw="mark"] .site-header .brand>span{display:none}
[data-nw="mark"] .site-header .brand .v2-mobile-mark{width:34px;height:34px}
/* In the three new bars the drawings, not their 44px boxes, meet the page's edge, and the menu's lines are a little shorter. */
[data-nb]:not([data-nb^="pc-"]) .site-header .header-tools{margin-right:-10px}
[data-nb]:not([data-nb^="pc-"]) .site-header .menu-trigger[aria-expanded="false"] .v2-nav-icon path{d:path("M5 7.5h14M5 12h14M5 16.5h14")}
/* Name in the middle */
[data-nb="mid"] .site-header .header-tools{margin-left:auto}
[data-nb="mid"] .site-header .header-tools>.menu-trigger{position:absolute;left:calc(var(--nb-edge) - 10px);top:6px}
[data-nb="mid"] .site-header .brand{position:absolute;left:50%;top:6px;margin:0;transform:translateX(-50%);white-space:nowrap}
@media(max-width:359px){
 [data-nb="mid"] .site-header .brand{gap:7px;font-size:19px}
 [data-nb="mid"]:not([data-nw="mark"]) .site-header .brand .v2-mobile-mark{width:24px;height:24px}
 [data-nb="mid"][data-nw="word"] .site-header .brand{font-size:22px}
}
/* Search in the bar */
[data-nb="field"] .site-header .header-inner{gap:12px}
[data-nb="field"] .site-header .brand{margin-right:0}
[data-nb="field"] .site-header .brand>span{display:none}
[data-nb="field"] .site-header .brand .v2-mobile-mark{width:32px;height:32px}
[data-nb="field"] .site-header .header-tools{flex:1;min-width:0}
[data-nb="field"] .site-header .header-tools>[data-action="search"]{flex:1;justify-content:flex-start;gap:8px;width:auto;min-width:0;height:42px;margin-right:4px;padding:0 12px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--muted);font:400 16px/1 var(--sans)}
[data-nb="field"] .site-header .header-tools>[data-action="search"]::after{content:'Search a topic';overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
[data-nb="field"] .site-header .header-tools>[data-action="search"] .icon{flex:none;width:20px;height:20px;color:var(--ink)}
/* ---- Round four: one set of measures (data-nr), for the three settled fields, Search under the name and Search as a button.
   Measured from what is drawn, not from the boxes around it: the bag and the menu's lines are 14 wide inside a 24 box.
   One number, 20px: the page's own edge (.wrap at 600px and under), and the space between the sign, the field, the bag and
   the lines. Buttons are 34 wide and 44 tall, so the drawn parts are 20 apart. Under 361px the page's edge is 16px. ---- */
html[data-nr]{--nr-edge:20px}
@media(max-width:360px){html[data-nr]{--nr-edge:16px}}
[data-nr] .site-header .header-inner{gap:20px;padding-left:max(var(--nr-edge),env(safe-area-inset-left,0px));padding-right:max(var(--nr-edge),env(safe-area-inset-right,0px))}
[data-nr] .site-header .mobile-menu{padding-left:max(var(--nr-edge),env(safe-area-inset-left,0px));padding-right:max(var(--nr-edge),env(safe-area-inset-right,0px))}
[data-nr] .site-header .header-tools{gap:0;margin-right:-10px}
[data-nr] .site-header .header-tools>.icon-button,[data-nr] .site-header .header-tools>.cart-trigger{width:34px;min-width:34px;height:44px}
/* The cart's number: smaller, at the bag's corner, with a white ring, so the bag is not covered. */
[data-nr] .site-header .cart-count{top:1px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;font-size:11.5px;line-height:17px;box-shadow:0 0 0 2px #fff}
/* Search in the bar, measured */
[data-nb="field"][data-nf] .site-header .brand .v2-mobile-mark{width:28px;height:28px}
[data-nb="field"][data-nf] .site-header .header-tools>[data-action="search"]{width:auto;min-width:0;height:40px;margin-right:10px;padding:0 12px;gap:8px}
[data-nb="field"][data-nf] .site-header .header-tools>[data-action="search"] .icon{width:18px;height:18px}
[data-nb="field"][data-nf="big"] .site-header .brand .v2-mobile-mark{width:32px;height:32px}
[data-nb="field"][data-nf="big"] .site-header .header-tools>[data-action="search"]{height:44px;padding:0 14px}
[data-nb="field"][data-nf="big"] .site-header .header-tools>[data-action="search"] .icon{width:20px;height:20px}
[data-nb="field"][data-nf="soft"] .site-header .header-tools>[data-action="search"]{border-color:transparent;background:var(--soft)}
/* Search under the name: two lines. The tools' box is dissolved so the field can take a line of its own. */
html[data-nb="under"]{--header:102px}
[data-nb="under"] .site-header .header-inner{flex-wrap:wrap;align-content:flex-start;gap:2px 0;height:102px;padding-top:6px}
[data-nb="under"] .site-header .header-tools{display:contents}
[data-nb="under"] .site-header .header-tools>.cart-trigger{order:2}
[data-nb="under"] .site-header .header-tools>.menu-trigger{order:3;margin-right:-10px}
[data-nb="under"] .site-header .header-tools>[data-action="search"]{order:4;flex:0 0 100%;justify-content:flex-start;gap:8px;width:100%;height:40px;padding:0 12px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--muted);font:400 16px/1 var(--sans)}
[data-nb="under"] .site-header .header-tools>[data-action="search"]::after{content:'Search a topic or subject';overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
[data-nb="under"] .site-header .header-tools>[data-action="search"] .icon{flex:none;width:18px;height:18px;color:var(--ink)}
[data-nb="under"] .site-header .mobile-menu{top:102px;max-height:calc(100dvh - 102px)}

/* Two buttons */
[data-nb="two"] .site-header .header-tools>[data-action="search"]{display:none}
.nb-find{display:flex;align-items:center;gap:10px;width:100%;height:48px;margin:10px 0 6px;padding:0 14px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--muted);font:400 16px/1.2 var(--sans);text-align:left;cursor:pointer}
.nb-find .nv-icon{width:20px;height:20px;color:var(--ink)}

/* ---- Round one: the menus (?navbarMenu=) ---- */
/* ---- Tidy list (round six): the shop's drop-down in order. Three places to shop in the heading letters, a line, three smaller
   lines. The page behind is dimmed with the colour the shop's windows use; the dimming is cut off above the menu so the bar
   stays clear. ---- */
:is([data-nv="list"],[data-nv="last"]) .site-header .mobile-menu{padding-top:8px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));border-bottom:0;box-shadow:0 0 0 100vmax rgba(10,28,17,.42);clip-path:inset(0 -100vmax -100vmax -100vmax)}
:is([data-nv="list"],[data-nv="last"]) .site-header .mobile-menu>a{min-height:52px;border-bottom:0;font:600 20px/1.3 var(--serif);color:#000}
:is([data-nv="list"],[data-nv="last"]) .site-header .mobile-menu>hr{height:1px;margin:8px 0;border:0;background:var(--line)}
:is([data-nv="list"],[data-nv="last"]) .site-header .mobile-menu>a.nv-more{min-height:46px;font:500 16px/1.3 var(--sans);color:var(--ink)}
/* Round seven: what the menus hold. The first line (My sheets, or Sign in) has a note under it; a line may end in a figure;
   signed in, the menu ends with the email and Sign out. Shared by Tidy list and Small menu, which are drawn inside the
   shop's menu; Full screen has its own under .nv-screen. */
.site-header .mobile-menu>a.nv-first{flex-direction:column;align-items:flex-start;justify-content:center;gap:1px}
.site-header .mobile-menu>a.nv-first b{font:inherit}
.site-header .mobile-menu>a.nv-first small,.nv-me small{font:normal 400 14px/1.3 var(--sans);letter-spacing:0;color:var(--muted)}
.site-header .mobile-menu>a.nv-first small.is-due{font-weight:600;color:var(--green)}
.site-header .mobile-menu>a>i,.nv-rows a>i{flex:none;margin-left:auto;font:normal 400 14px/1.3 var(--sans);color:var(--muted)}
.nv-who{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin:0;font:400 14px/1.3 var(--sans);color:var(--muted)}
.nv-who span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;color:var(--muted)}
.nv-out{flex:none;min-height:44px;padding:0 0 0 12px;border:0;background:none;font:600 15px/1 var(--sans);color:var(--ink);cursor:pointer}
/* The first line keeps the 13px above its words that every large line has, and only 3px under its note: the next line's own
   13px follows, so the note sits 16px from the next line instead of 24 (the owner: "I fel theres an extra gap , fix it"). */
:is([data-nv="list"],[data-nv="last"]) .site-header .mobile-menu>a.nv-first{justify-content:flex-start;gap:0;min-height:0;padding:13px 0 3px}
/* ---- Button last (12 October 2026; in the shop): Tidy list's panel and lines, with the Sign in button at the foot when
   signed out. The shop's ".mobile-menu a" reaches the button, so its rule names everything. ---- */
[data-nv="last"] .site-header .mobile-menu{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
[data-nv="last"] .site-header .mobile-menu>a:not(.nv-more){letter-spacing:-.01em}
[data-nv="last"] .site-header .mobile-menu .nv-acct{display:grid;gap:8px;padding:10px 0 0}
[data-nv="last"] .site-header .mobile-menu .nv-btn{display:flex;align-items:center;justify-content:center;min-width:0;min-height:48px;padding:0 16px;border:1.5px solid var(--green);border-radius:10px;background:#fff;font:600 17px/1.25 var(--sans);letter-spacing:0;color:var(--green);text-decoration:none}
[data-nv="last"] .site-header .mobile-menu .nv-note{margin:0;font:400 14px/1.35 var(--sans);color:var(--muted);text-align:center}
[data-nv="small"] .site-header .mobile-menu>a.nv-first{min-height:58px;font-weight:600}
[data-nv="small"] .site-header .mobile-menu>.nv-who{padding:0 12px}

/* ---- Small menu: a card under the button, in the shop's menu style (dropdowns.css: .dd-panel, .dd-option) ---- */
[data-nv="small"] .site-header .mobile-menu{top:58px;left:auto;right:max(12px,env(safe-area-inset-right,0px));width:236px;max-height:calc(100dvh - 70px);padding:6px;border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 2px 6px #1e4c2b1f}
[data-nv="small"] .site-header .mobile-menu>a{min-height:46px;padding:8px 12px;border:0;border-radius:8px;font:500 16px/1.3 var(--sans);color:var(--ink)}
[data-nv="small"] .site-header .mobile-menu>a:active{background:var(--soft)}
[data-nv="small"] .site-header .mobile-menu>hr{height:1px;margin:6px 12px;border:0;background:var(--line)}
[data-nv="small"] .site-header .menu-trigger[aria-expanded="true"]{background:var(--soft)}

/* ---- Full screen: the menu is a screen of its own under the bar ---- */
[data-nv="full"] .site-header .mobile-menu{display:none}
.nv-screen{display:none;position:fixed;z-index:45;top:56px;left:0;right:0;bottom:0;overflow-y:auto;overscroll-behavior:contain;padding:16px max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:#fff}
#mobileMenu:not([hidden])+.nv-screen{display:block}
html.nv-lock body{overflow:hidden}
.nv-me{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px;margin-bottom:10px;padding:12px 14px;border-radius:14px;background:var(--mint);color:#000;text-decoration:none}
.nv-me-words{display:grid;gap:1px;min-width:0}
.nv-me b{font:600 20px/1.25 var(--serif);letter-spacing:-.01em}
.nv-me small.is-due{font-weight:600;color:var(--forest)}
.nv-me .nv-icon{width:20px;height:20px;color:var(--forest)}
.nv-screen .nv-who{margin-top:4px;border-top:1px solid var(--line)}
.nv-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.nv-card{display:block;min-width:0;padding:14px 14px 13px;border-radius:14px;background:var(--soft);color:#000;text-decoration:none}
.nv-pic{display:flex;align-items:flex-end;height:98px}
.nv-cover{display:block;flex:none;width:68px;border:1px solid var(--line-strong);border-radius:4px;background:#fff;overflow:hidden}
.nv-cover .pg{display:block}
.nv-pic.is-stack .nv-cover+.nv-cover{margin-left:-54px}
.nv-card>b{display:block;margin-top:12px;font:600 19px/1.25 var(--serif);letter-spacing:-.01em}
.nv-card>small{display:block;margin-top:3px;font:400 14px/1.35 var(--sans);color:var(--muted)}
.nv-rows{margin-top:6px}
.nv-rows a{display:flex;align-items:center;gap:12px;min-height:52px;border-bottom:1px solid var(--line);font:600 19px/1.3 var(--serif);color:#000;text-decoration:none}
.nv-rows a:last-child{border-bottom:0}
.nv-rows .nv-icon{width:20px;height:20px;color:var(--quiet)}
.nv-rows a>span{margin-right:auto}
.nv-rows a>i{margin-left:0}

/* ---- Bar at the foot: no menu button; four places at the foot of every page ---- */
[data-nv="foot"] .site-header .header-tools>.menu-trigger,[data-nv="foot"] .site-header .mobile-menu{display:none}
.nv-foot{position:fixed;z-index:34;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);height:calc(60px + env(safe-area-inset-bottom,0px));padding:0 6px env(safe-area-inset-bottom,0px);border-top:1px solid var(--line);background:#fff}
.nv-foot[hidden]{display:none}
.nv-foot a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;color:var(--muted);font:500 12.5px/1.2 var(--sans);text-decoration:none}
.nv-foot a[aria-current]{color:var(--forest);font-weight:700}
.nv-foot a[aria-current] .nv-icon{stroke-width:2.1}
html.nv-has-foot body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
html.nv-has-foot body.has-mobile-cart{padding-bottom:calc(144px + env(safe-area-inset-bottom,0px))}
/* The cart's own bar ("R157 · View cart") sits on top of this one, not over it. */
html.nv-has-foot .mobile-cart{bottom:calc(60px + env(safe-area-inset-bottom,0px));padding-bottom:12px}
html.nv-has-foot .preview-dev-trigger{bottom:74px}
html.nv-has-foot .has-mobile-cart .preview-dev-trigger{bottom:160px}

/* ---- The laptop's bar (laptop round one). From 1024px, where the shop shows its links; under that the phone's bar and
   menu button are used. data-nb is pc-fixed, pc-field or pc-rows. ---- */
@media(min-width:1024px){
 /* Shared: the name as on the phone (the bright sign, black letters at 600, no full stop); the links readable; every label
    shown at every width; search present. */
 [data-nb^="pc-"] .site-header .header-tools{margin-right:0;gap:10px}
 [data-nb^="pc-"] .site-header .brand img,[data-nb^="pc-"] .site-header .brand .brand-dot{display:none}
 [data-nb^="pc-"] .site-header .brand .v2-mobile-mark{display:block;flex:none;width:30px;height:30px}
 [data-nb^="pc-"] .site-header .brand{gap:10px;font-size:24px;font-weight:600;letter-spacing:-.02em;color:#000}
 [data-nb^="pc-"] .site-header .desktop-nav{gap:30px}
 [data-nb^="pc-"] .site-header .desktop-nav a{font-size:16px;font-weight:500;color:var(--ink)}
 [data-nb^="pc-"] .site-header .desktop-nav a:hover{color:var(--green-hover)}
 [data-nb^="pc-"] .site-header .header-tools .desktop-label{display:inline}
 [data-nb^="pc-"] .site-header .library-link{min-width:0;padding:0 6px;color:var(--ink)}
 [data-nb^="pc-"] .site-header .library-link.is-out>span:first-child{display:none}
 [data-nb^="pc-"] .site-header .cart-trigger{padding:0 13px}
 /* The bag and the book sat on the words' baseline, about 3px above the middle of their buttons ("fix the bag icon
    placement in the button"). Their holders are now boxes exactly as tall as the drawing. */
 [data-nb^="pc-"] .site-header .cart-trigger>[data-icon],[data-nb^="pc-"] .site-header .library-link>[data-icon]{display:flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px}
 [data-nb^="pc-"] .site-header .cart-trigger>[data-icon] .enhanced-nav-icon,[data-nb^="pc-"] .site-header .library-link>[data-icon] .enhanced-nav-icon{display:block;width:20px;height:20px}
 [data-nb^="pc-"] .site-header .cart-trigger>[data-icon] .v2-nav-icon,[data-nb^="pc-"] .site-header .library-link>[data-icon] .v2-nav-icon{display:none}
 [data-nb^="pc-"] .site-header .cart-trigger .desktop-label,[data-nb^="pc-"] .site-header .library-link .desktop-label{line-height:20px}
 [data-nb^="pc-"] .site-header .header-tools>[data-action="search"]{display:inline-flex;border-radius:10px;color:var(--ink)}
 /* Links in the middle: the shop's arrangement. Search is an icon. */
 /* Search field and Two rows: search is a field you can see. */
 [data-nb="pc-field"] .site-header .header-tools>[data-action="search"],[data-nb="pc-rows"] .site-header .header-tools>[data-action="search"],[data-nb="pc-search"] .site-header .header-tools>[data-action="search"]{flex:1;justify-content:flex-start;gap:10px;width:auto;min-width:140px;height:44px;margin-inline:auto;padding:0 14px;border:1px solid var(--line-strong);background:#fff;color:var(--muted);font:400 16px/1 var(--sans)}
 [data-nb="pc-field"] .site-header .header-tools>[data-action="search"]::after,[data-nb="pc-rows"] .site-header .header-tools>[data-action="search"]::after,[data-nb="pc-search"] .site-header .header-tools>[data-action="search"]::after{content:'Search a topic or subject';overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 [data-nb="pc-field"] .site-header .header-tools>[data-action="search"] .icon,[data-nb="pc-rows"] .site-header .header-tools>[data-action="search"] .icon,[data-nb="pc-search"] .site-header .header-tools>[data-action="search"] .icon{flex:none;width:20px;height:20px;color:var(--ink)}
 /* Search field: the links beside the name, the field in the room that leaves. */
 [data-nb="pc-field"] .site-header .desktop-nav{margin:0 0 0 12px;gap:26px}
 [data-nb="pc-field"] .site-header .header-tools{flex:1;min-width:0;margin-left:16px}
 [data-nb="pc-field"] .site-header .header-tools>[data-action="search"]{max-width:420px}
 /* Search in the middle (round two): no links. The field sits in the middle of the page, not of the room left over, and
    never reaches the name or the buttons: it is at most 520px and leaves 260px on each side. */
 [data-nb="pc-search"] .site-header .desktop-nav{display:none}
 [data-nb="pc-search"] .site-header .header-inner{position:relative}
 [data-nb="pc-search"] .site-header .header-tools>[data-action="search"]{position:absolute;top:calc(50% - 22px);left:calc(50% - min(520px,100% - 520px)/2);width:min(520px,100% - 520px);max-width:none;margin:0}
 /* Two rows: 100px tall. The links take the second row. */
 html[data-nb="pc-rows"]{--header:101px}
 [data-nb="pc-rows"] .site-header .header-inner{flex-wrap:wrap;align-content:flex-start;gap:4px 24px;height:100px;padding-top:8px}
 [data-nb="pc-rows"] .site-header .header-tools{order:2;flex:1;min-width:0}
 [data-nb="pc-rows"] .site-header .header-tools>[data-action="search"]{max-width:560px}
 [data-nb="pc-rows"] .site-header .desktop-nav{order:3;flex:0 0 100%;margin:0;gap:32px}
 [data-nb="pc-rows"] .site-header .desktop-nav a{min-height:40px}
}
@media(min-width:1024px) and (max-width:1100px){
 [data-nb^="pc-"] .site-header .desktop-nav{gap:22px}
 [data-nb^="pc-"] .site-header .desktop-nav a{font-size:15px}
 [data-nb="pc-field"] .site-header .desktop-nav{gap:18px}
 [data-nb="pc-field"] .site-header .header-tools>[data-action="search"]::after{content:'Search a topic'}
}