/* SITE2 (20 Oct 2026; the owner 20 Oct 03:22 "fix all; 12 yes", points 4, 5 and 11): one top bar on every public page, the front page's own bar: the logo and the site's name,
   the way back to the front page, the Documents menu, the language switch, Exact words / Plain words (only on a page that has plain lines), Light / Dark.
   Source: Build system/topbar.css, copied to public/public/topbar.css by site2.py; the markup is written by site2.py (Build system/site2.py), the behaviour by topbar.js.
   Colours: only the site's own, from the DES1 values buttons.css sets on every page (navy, red, the blues) so the bar is the same on every page, light and dark.
   The bar's buttons keep the look buttons.css gives the band (section 9 and 11c); this file gives the layout, the Documents panel and the places the bar sits. */

html .band.sb{box-sizing:border-box;width:100%;position:relative;z-index:9990;background:var(--des1-navy);color:#FFFFFF;border-bottom:2px solid var(--des1-red);
  font:400 15px/1.2 "Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
html .band.sb *{box-sizing:border-box}
html .band.sb .in{max-width:1180px;margin:0 auto;padding:8px 18px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
html .band.sb a.site{display:inline-flex;align-items:center;gap:8px;color:#FFFFFF;text-decoration:none;font:600 17px/1.2 "Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;border-radius:6px}
html .band.sb a.site:hover{text-decoration:underline;text-underline-offset:3px}
html .band.sb a.site img{display:block;width:28px;height:28px;border-radius:50%;background:#FFFFFF;flex:none}
html .band.sb .ctl{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0;padding:0;max-width:none;border:0;background:none}
html .band.sb .lang1-bar,html .band.sb .lang1-bar.lang1-band{display:contents;margin:0;padding:0;max-width:none}
html .band.sb .lang1-miss{display:none}
html .band.sb .wbtns{display:flex;gap:6px;flex-wrap:wrap}
html .band.sb .seg{display:inline-flex;gap:0;flex-wrap:nowrap;border:2px solid #B9CBEE;border-radius:10px;overflow:hidden;vertical-align:middle}
html .band.sb .seg .btn+.btn{border-left:2px solid #B9CBEE!important}
html .band.sb .btn,html .band.sb a.lang1-sw,html .band.sb a#hubback,html .band.sb button#hubnavb{font:400 15px/1.1 "Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  border-radius:8px;padding:9px 11px;text-decoration:none;cursor:pointer;display:inline-block;min-height:0;height:auto;margin:0}
html .band.sb a#hubback,html .band.sb button#hubnavb{position:static;inset:auto;display:inline-flex;align-items:center}
html .band.sb button#hubnavb{gap:0}
html .band.sb button#hubnavb::after{content:"";display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 1px 3px 9px}
html .band.sb button#hubnavb[aria-expanded="true"]::after{transform:rotate(-135deg);margin-bottom:-2px}
html .band.sb a.lang1-sw:hover,html .band.sb .btn:hover{border-color:var(--des1-red)}
html .band.sb :is(a,button):focus-visible{outline:3px solid var(--des1-band-focus);outline-offset:2px}

/* the Documents menu: a panel that opens under its button */
html .band.sb #hubnav{position:relative;inset:auto;right:auto;top:auto;z-index:2}
html .band.sb #hubnavp{position:absolute;right:0;left:auto;top:calc(100% + 8px);width:340px;max-width:calc(100vw - 24px);max-height:calc(100vh - 90px);overflow:auto;padding:6px;
  background:var(--des1-card);border:1px solid var(--des1-line);border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,.22);color:var(--des1-ink);text-align:left}
html .band.sb #hubnavp[hidden]{display:none}
html .band.sb #hubnavp.sb-left{right:auto;left:0}
html .band.sb #hubnavp.sb-fixed{position:fixed;left:12px;right:12px;top:var(--sb-top,120px);width:auto;max-width:none;max-height:calc(100vh - var(--sb-top,120px) - 12px)}
html .band.sb #hubnavp a{display:block;text-decoration:none;color:var(--des1-ink);padding:9px 12px;border-radius:8px;font:15px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
html .band.sb #hubnavp a:hover{background:var(--des1-btn)}
html .band.sb #hubnavp .hn-home{font-weight:600;border-bottom:1px solid var(--des1-line);border-radius:8px 8px 0 0;margin-bottom:4px;padding-bottom:11px}
html .band.sb #hubnavp .hn-list a{font-size:14.5px}
html .band.sb #hubnavp .hn-cur{font-weight:700;box-shadow:inset 3px 0 0 var(--des1-red)}

/* a computer (1100 px and up): the bar stays at the top as the page scrolls; the page and its side menu start under it (findbox.js reads its height as --fb-top);
   a phone or a narrow window: the bar is the first thing on the page and scrolls away with it, so it never takes the screen */
@media (min-width:1100px){
  html .band.sb{position:fixed;top:0;left:0;right:0}
  html body.sb-on{padding-top:var(--tb-h,60px)!important}
  html body.sb-on.has-sn nav.sn:not(:has(#fb)){top:var(--tb-h,60px)}
  html{scroll-padding-top:calc(var(--tb-h,60px) + 12px)}
}
/* 1100 to 1279 px: the bar is fixed and must stay one row, so its parts take a little less room (the Spanish words pair is the longest) */
@media (min-width:1100px) and (max-width:1279.98px){
  html .band.sb .in{padding:6px 12px;gap:6px 10px}
  html .band.sb a.site{font-size:15px;gap:6px}
  html .band.sb a.site img{width:24px;height:24px}
  html .band.sb .ctl,html .band.sb .wbtns{gap:4px}
  html .band.sb .btn,html .band.sb a.lang1-sw,html .band.sb a#hubback,html .band.sb button#hubnavb{padding:7px 8px;font-size:14px}
}
@media (max-width:760px){
  html .band.sb .in{padding:8px 12px}
  html .band.sb a.site{font-size:16px}
}
@media (max-width:460px){
  html .band.sb .btn,html .band.sb a.lang1-sw,html .band.sb a#hubback,html .band.sb button#hubnavb{padding:8px 10px;font-size:14px}
}
@media print{html .band.sb{display:none!important}html body.sb-on{padding-top:0!important}}

/* point 9: "Where the texts come from" (the front page's own button), closed until the reader opens it; the words are the page's own, unchanged */
details.src{margin:8px 0 0}
details.src>summary{display:inline-block;cursor:pointer;list-style:none;padding:7px 13px;background:var(--des1-btn);border:1.5px solid var(--des1-btn-line);border-radius:8px;
  font:400 15px/1.2 "Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;color:var(--des1-ink)}
details.src>summary::-webkit-details-marker{display:none}
details.src[open]>summary{border-color:var(--des1-red)}
details.src>summary:focus-visible{outline:3px solid var(--des1-head);outline-offset:2px}

/* point 1: the masthead (Laws in progress and the other pages with a masthead) in the house header colours in both modes (navy; dark, the deeper navy), light words;
   the old dark-mode rule that turned it pale with dark words is out of the pages (site2.py) */
html header.mast{background:var(--des1-navy)!important;color:#F3EEE4}
html header.mast h1{color:#FFFFFF}
html header.mast .strip,html header.mast .strip a,html header.mast .strip span{color:#F3EEE4}
html header.mast .top p,html header.mast .stand{color:#F3EEE4}

/* point 7: a date in a part set in capitals (a table head, a card's label, the date lines) keeps its own letters: no capitals are put on it */
html body .dt{text-transform:none!important;letter-spacing:normal!important}

/* MN1B (24 Oct 2026; the owner 24 Oct 20:20, MN1A choice 1 "A"): the grouped Documents panel. Source of the markup: menu_groups.py (data: menu_groups.json); behaviour: topbar.js (public bar)
   and hubproc.py's members' script. A phone: a closed row for each group, the group that holds the page open; a computer: every group open in three columns (two on a members' page).
   The group rows are <summary> elements: buttons.css leaves them out of its button look (#hubnavp summary), as it leaves #hubnavb. */
html body div#hubnavp.mn.mn.mn{padding:8px 10px;color:var(--des1-ink)}
html body div#hubnavp.mn.mn.mn .mn-cols{display:block}
html body div#hubnavp.mn.mn.mn details.mn-g{margin:0;border-top:1px solid var(--des1-line);background:none}
html body div#hubnavp.mn.mn.mn details>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:8px 12px;margin:0;background:transparent;border:0;box-shadow:none;border-radius:8px;
  font:700 15px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;cursor:pointer;color:var(--des1-ink);text-align:left;width:100%}
html body div#hubnavp.mn.mn.mn details>summary::-webkit-details-marker{display:none}
html body div#hubnavp.mn.mn.mn details>summary:focus-visible{outline:3px solid var(--des1-head);outline-offset:2px}
html body div#hubnavp.mn.mn.mn details.mn-g>summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-4px 4px 0 8px;flex:none}
html body div#hubnavp.mn.mn.mn details.mn-g[open]>summary::after{transform:rotate(-135deg);margin-top:4px}
html body div#hubnavp.mn.mn.mn ul{list-style:none;margin:0 0 6px;padding:0}
html body div#hubnavp.mn.mn.mn li{margin:0;padding:0}
html body div#hubnavp.mn.mn.mn li a{display:block;padding:9px 12px 9px 20px;font:14.5px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;text-decoration:none;color:var(--des1-ink);border-radius:8px}
html body div#hubnavp.mn.mn.mn li a:hover{background:var(--des1-btn)}
html body div#hubnavp.mn.mn.mn li a.hn-cur{font-weight:700;box-shadow:inset 3px 0 0 var(--des1-red)}
html body div#hubnavp.mn.mn.mn details.mn-sub{margin:2px 0 4px 12px;border:0}
html body div#hubnavp.mn.mn.mn details.mn-sub>summary{min-height:0;padding:8px 12px;font-weight:600;font-size:14px;justify-content:flex-start}
html body div#hubnavp.mn.mn.mn details.mn-sub>summary::before{content:"+";font-weight:700;margin-right:8px}
html body div#hubnavp.mn.mn.mn details.mn-sub[open]>summary::before{content:"\2212"}
html body div#hubnavp.mn.mn.mn details.mn-sub li a{padding-left:20px;font-size:14px}
html body div#hubnavp.mn.mn.mn .hn-home.hn-cur{font-weight:700;box-shadow:inset 3px 0 0 var(--des1-red)}
@media (min-width:761px){
  html .band.sb #hubnavp.mn.mn{width:min(940px,calc(100vw - 24px));max-height:calc(100vh - var(--tb-h,58px) - 18px);overflow:auto;position:fixed;left:auto;right:max(12px,calc((100vw - 1180px)/2 + 12px));top:calc(var(--tb-h,58px) + 6px)}
  html body div#hubnavp.mn.mn.mn .mn-cols{display:block;column-count:3;column-gap:22px}
  html body div#hubnavp.mn.mn.mn details.mn-g{border-top:0;break-inside:avoid;margin:0 0 10px;display:block}
  html body div#hubnavp.mn.mn.mn details.mn-g>summary{cursor:default;min-height:0;padding:8px 12px 4px;font-size:12.5px;letter-spacing:.06em;color:var(--des1-head);font-weight:700}
  html body div#hubnavp.mn.mn.mn details.mn-g>summary::after{display:none}
  html body div#hubnavp.mn.mn.mn li a{padding:6px 12px}
}
/* the members' pages (the hub's fixed bar: the Documents button at the right, the panel under it): two columns on a computer, the width of the screen on a phone */
@media (min-width:761px){html body > #hubnav > div#hubnavp.mn.mn.mn{width:min(620px,calc(100vw - 28px))}html body > #hubnav > div#hubnavp.mn.mn.mn .mn-cols{column-count:2}}
@media (max-width:760px){html body > #hubnav > div#hubnavp.mn.mn.mn{width:calc(100vw - 28px)}}
/* the members' pages that are not documents (the checker, the sources page): the button and panel stand in the masthead strip; the panel is fixed under the button (the masthead hides what overflows it) */
html body .mn-ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end}
html body .mn-ctl #hubnav{position:relative;inset:auto;right:auto;top:auto;z-index:2}
html body .mn-ctl #hubnavb{display:inline-flex;align-items:center;height:auto;min-height:0;margin:0;padding:8px 13px;font:400 15px/1.1 "Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;cursor:pointer}
html body .mn-ctl #hubnavb::after{content:"";display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 1px 3px 9px}
html body .mn-ctl #hubnavb[aria-expanded="true"]::after{transform:rotate(-135deg);margin-bottom:-2px}
html body .mn-ctl #hubnavp.mn.mn.mn{position:fixed;left:auto;right:14px;top:var(--mn-top,70px);width:min(620px,calc(100vw - 28px));max-height:calc(100vh - var(--mn-top,70px) - 12px);overflow:auto;z-index:9999;text-align:left;
  background:var(--des1-card);border:1px solid var(--des1-line);border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,.22)}
@media (min-width:761px){html body .mn-ctl #hubnavp.mn.mn.mn .mn-cols{column-count:2}}
@media (max-width:760px){html body .mn-ctl #hubnavp.mn.mn.mn{left:14px;right:14px;width:auto}}
html body div#hubnavp.mn.mn.mn a.hn-home{display:block;padding:9px 12px 11px;margin-bottom:4px;font:600 15px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;border-bottom:1px solid var(--des1-line);border-radius:8px 8px 0 0}

/* NAV4 (27 Oct 2026): the link back to where the reader was, beside "Back to the front page" (the same look as that button; on the members' fixed band it sits at its own place, and on a phone, where the band has no room for it, on a second line under it). Words are in the script, PROPOSED. */
html .band.sb a#hubprev{font:400 14px/1.1 "Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;border-radius:8px;padding:9px 11px;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;min-height:0;height:auto;margin:0;position:static;inset:auto}
@media (max-width:760px){html .band.sb a#hubprev{padding:7px 8px}}
@media (max-width:460px){html .band.sb a#hubprev{padding:8px 10px}}
html body:not(.nav2-admin) a#hubprev{background:var(--des1-navy)!important;color:#FFFFFF!important;border:1px solid var(--des1-band-line)!important;border-radius:8px!important;font-family:var(--des1-serif)!important;font-weight:400!important;text-decoration:none!important;box-shadow:none!important;font-size:14px!important}
@media (hover:hover){html body:not(.nav2-admin) a#hubprev:hover{background:var(--des1-band-hover)!important;border-color:var(--des1-band-line)!important;color:#FFFFFF!important}}
html body:not(.nav2-admin) a#hubprev:focus-visible{outline:3px solid var(--des1-band-focus)!important;outline-offset:2px!important}
a#hubprev.n4-fx{position:fixed;top:6px;z-index:9999;height:32px;padding:0 12px;white-space:nowrap;display:inline-flex;align-items:center;box-sizing:border-box}
html.n4-two a#hubprev.n4-fx{top:50px}
html.n4-two #hubbar{height:88px!important}
html.n4-two body{padding-top:88px!important}
@media print{a#hubprev{display:none!important}}

/* NAV3 (26 Oct 2026): where a jump stops, and the brief mark on the item. The same block is at the end of findbox.css and topbar.css (a page loads one or both; the rules are the same, so they agree).
   One rule instead of three: the room above an item used to be added up from the page's top-bar line, the find box's line, 64 px on the heading (sidenav.css) and 0 to 90 px on the item in the page's own style,
   so a jump stopped 60 to 125 px too low on most pages and under the fixed bar on the front page. Now the room is on the page (scroll-padding-top, so Tab and find-in-page keep their room too) and none is on the item.
   --nav3-off is the bottom of what is stuck at the top of the window (findbox.js sets --fb-top, the fixed bar, and --fb-h, the find box where it is stuck above the text: a phone, a narrow window, and the pages with no side menu) and 12 px.
   It changes no layout: scroll-padding and scroll-margin move nothing. The mark is a shadow, which moves nothing either. */
html{--nav3-off:calc(var(--fb-top,var(--tb-h,0px)) + 12px)}
@media (max-width:1099.98px){
  html{--nav3-off:calc(var(--fb-top,0px) + 12px)}
  html:has(body.fb-on){--nav3-off:calc(var(--fb-top,0px) + var(--fb-h,0px) + 12px)}
}
@media (max-width:1099.98px){html:has(details.toc-m){--nav3-off:calc(var(--fb-top,0px) + 45px + 12px)}}   /* the Contents bar the two Ending-picture pages keep stuck at the top of a phone (45 px high) */
@media (min-width:1100px){html:has(body.fb-nomenu){--nav3-off:calc(var(--fb-top,0px) + var(--fb-h,0px) + 12px)}}
html{scroll-padding-top:var(--nav3-off)!important}
html body [id]{scroll-margin-top:0!important}
/* the mark: a soft tint, and a coloured edge just outside its left side, for about two seconds, then it fades back; the colours are the page's own theme colours (its blue, and a soft mix of that blue), so they follow light and dark;
   with reduced motion there is no fade: a plain outline for two seconds. The tint is a shadow inside the item, so the item keeps its size and nothing moves. */
.nav3-hit{--nav3-edge:var(--sea,var(--link,#003399));--nav3-tint:var(--sea-soft,var(--btn,#E8EEF9));animation:nav3-hit 1.8s ease-out both}
@supports (color:color-mix(in srgb,red,blue)){.nav3-hit{--nav3-tint:color-mix(in srgb,var(--nav3-edge) 18%,transparent)}}
@keyframes nav3-hit{
  0%,35%{box-shadow:-6px 0 0 0 var(--nav3-edge),inset 0 0 0 999px var(--nav3-tint)}
  100%{box-shadow:-6px 0 0 0 transparent,inset 0 0 0 999px transparent}
}
@media (prefers-reduced-motion:reduce){.nav3-hit{animation:none;outline:3px solid var(--nav3-edge);outline-offset:2px}}

/* SFX2A (1 Nov 2026; the owner 29 Oct 15:33-15:35 house style A+C, 1 Nov 15:54 "Go" on card A): the slim "Ask a question or search the site" bar in the top bar of every page (it was on the front pages only, styled inside them); colours: the bar's own DES1 values */
html .band.sb .uxb1-bar{flex:1 1 260px;min-width:200px;max-width:520px;display:flex;margin:0;border-radius:8px;overflow:hidden;background:var(--des1-card);border:2px solid var(--des1-band-line)}
html .band.sb .uxb1-bar input{flex:1;min-width:0;border:0;background:transparent;color:var(--des1-ink);font:15.5px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;padding:8px 10px}
html .band.sb .uxb1-bar input::placeholder{color:var(--des1-ink2);opacity:1}
html .band.sb .uxb1-bar button{border:0;border-left:2px solid var(--des1-btn-line);background:var(--des1-btn);color:var(--des1-ink);font:15px/1.1 "Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;padding:8px 14px;cursor:pointer}
html .band.sb .uxb1-bar:focus-within{outline:3px solid var(--des1-band-focus);outline-offset:1px}
@media (max-width:760px){html .band.sb .uxb1-bar{order:5;flex-basis:100%;max-width:none}}