@import url("/public/fonts/treaty-fonts.css");   /* SITEFIX1 (1 Nov 2026): 51 pages asked for the site serif (Newsreader) but did not load its font file and showed a fallback serif; every page loads this sheet, so every page now loads the fonts */
/* NAV2 (13 Oct 2026): every button on the treaty site easy to see at first glance, and every button matching (job NAV2; the request and its
   times are in the job file and the LOG, not here, because this file is public).
   DES1 (14 Oct 2026): the site look chosen by the owner, a mix of two styles: a navy top band with a thin red rule under it, and layered light
   blues with white cards; buttons with a thin light-blue frame, rounded, in the body serif and less bold; the side menu's current item on a
   white row with a small red dot; a calmer layout with fewer boxes inside boxes (job DES1; its request and times are in the job file and the
   LOG). DES1 replaced NAV2's 2px navy frames and bold labels; NAV2's places, sizes and behaviour stay.
   One shared file, linked from every page (public and members', English and Spanish, and the Spanish drafts) by buttonstyle.py, and from the
   Worker's admin pages. Style only: no wording, no place, no behaviour, no link is changed.
   Colours: only the site's own: the navy (#012169, dark #010F3A), the blue (#003399, dark #7FA2F0), the red (#C8102E, dark #E86A7D), the ink
   and the rule and soft tints of hub.css and the DES1 light blues (page #EEF3FA, card line #D3DEF3, button tint #E8EEF9, button line #B9CBEE;
   dark page #0F1830, cards #162142, line #26314A, button tint #1F2C55, button line #5F7FC9). Dark mode follows the page (the same two dark
   selectors as hub.css).
   Not given the button look, on purpose: links in the reading text (clause references .cx, the plain-term words .gl1-btn, article chips,
   "Back to the menu", "Link to this entry"), the checklist rows of the check pages (a row, not a button: its open mark is made navy), tables
   that open larger (.zoomable: their frame takes the card look of 9c), and the Worker's admin pages, which keep NAV2's look (section 8).
   Source: Gibraltar Treaty Analysis/Build system/buttons.css, copied to public/public/buttons.css by buttonstyle.py. Check: tools/buttons_check.py. */

/* a page with neither soft blue (the members' Sources and updates page, built by updates.py with its own older names) takes its own ground
   behind the buttons and its own accent for the focus ring, so its dark mode is followed too */
:root{--nav2-ink:var(--ink,#0E1A33);--nav2-head:var(--sea,var(--acc,#003399));--nav2-tint:var(--sea-soft,var(--soft,var(--bg,#E8EEF9)));--nav2-ground:var(--ground,var(--bg,#FFFFFF))}

/* DES1: the look's own colours, light, then dark (set here, not taken from each page, so that every page matches) */
:root{--des1-navy:#012169;--des1-red:#C8102E;--des1-head:#003399;--des1-page:#EEF3FA;--des1-card:#FFFFFF;--des1-line:#D3DEF3;--des1-btn:#E8EEF9;
  --des1-btn-line:#B9CBEE;--des1-band-line:#7FA2F0;--des1-band-hover:#003399;--des1-band-focus:#B9CBEE;--des1-ink:#0E1A33;--des1-ink2:#3A4660;
  --des1-muted:#5F6B82;--des1-count:#012169;--des1-on:#012169;--des1-on-ink:#FFFFFF;--des1-chg:#003399;
  --des1-serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--des1-navy:#010F3A;--des1-red:#E86A7D;--des1-head:#7FA2F0;--des1-page:#0F1830;
  --des1-card:#162142;--des1-line:#26314A;--des1-btn:#1F2C55;--des1-btn-line:#5F7FC9;--des1-band-hover:#1F2C55;--des1-ink:#E9EDF5;--des1-ink2:#C1C8D6;
  --des1-muted:#8E98AD;--des1-count:#7FA2F0;--des1-on:#7FA2F0;--des1-on-ink:#0B1222;--des1-chg:#7FA2F0}}
:root[data-theme="dark"]{--des1-navy:#010F3A;--des1-red:#E86A7D;--des1-head:#7FA2F0;--des1-page:#0F1830;--des1-card:#162142;--des1-line:#26314A;
  --des1-btn:#1F2C55;--des1-btn-line:#5F7FC9;--des1-band-hover:#1F2C55;--des1-ink:#E9EDF5;--des1-ink2:#C1C8D6;--des1-muted:#8E98AD;--des1-count:#7FA2F0;
  --des1-on:#7FA2F0;--des1-on-ink:#0B1222;--des1-chg:#7FA2F0}

/* 1. every button inside the page: a thin light-blue frame, rounded, the label in the body serif and less bold, no underline. The top band's
   buttons (back, Documents, the language switch, "Show what's changed") have their own look in section 9 */
html body :is(button,summary:not(.ckrow summary,#hubnavp summary),input[type=button],input[type=submit],input[type=reset],a.backbtn,a.cx-b,a.cx-cardshare):not(.cx,.gl1-btn,.sn-tg,.sn-btn,.cx-crumb,#chgbar button,.nav2-admin button,#hubback,#hubnavb,#chgtoggle){
  border:1px solid var(--des1-btn-line)!important;border-radius:8px!important;font-family:var(--des1-serif)!important;font-weight:500!important;text-decoration:none!important;box-shadow:none!important;cursor:pointer}

/* 2. the framed buttons: the light-blue tint behind, the label and its arrows and icons in the text ink.
   The main action of a form (filled in the heading blue, already the strongest thing on its page) keeps its fill: it is left out here. */
html body :is(button,summary:not(.ckrow summary,#hubnavp summary),input[type=button],input[type=reset],a.backbtn,a.cx-b,a.cx-cardshare):not(.cx,.gl1-btn,.sn-tg,.sn-btn,.cx-crumb,#chgbar button,.nav2-admin button,#hubback,#hubnavb,#chgtoggle,button.go,#ask button[type=submit],.box button:not(.gl1-btn),#totop,#df-stop,.df-toggle button[aria-pressed="true"],#fdwrap .fdadd,.ri-pick){
  background-color:var(--des1-btn)!important;color:var(--des1-ink)!important}
html body :is(summary:not(.ckrow summary,#hubnavp summary),a.backbtn,a.cx-cardshare,a.cx-b,button:not(.cx,.gl1-btn,.sn-tg,.sn-btn,.cx-crumb,#chgbar button,.nav2-admin button,#hubback,#hubnavb,#chgtoggle)) :not(.gl1-btn,.cx,svg *){color:inherit!important}
html body summary::marker{color:var(--des1-ink)}
html body summary::-webkit-details-marker{color:var(--des1-ink)}

/* a button that is switched on (pressed, or its part open) is filled with the navy (dark: the light blue), so its state reads at a glance */
html body :is(.tv-btn,button.aud-btn,.df-toggle button,.opts .opt)[aria-pressed="true"],html body :is(.tv-btn,button.aud-btn)[aria-expanded="true"]{background-color:var(--des1-on)!important;border-color:var(--des1-on)!important;color:var(--des1-on-ink)!important}

/* 3. labels that were small are a little larger, and a little room where there was none */
html body :is(button.aud-btn,button.copy,.ckbtn,#pr-x,.cx-b,a.cx-cardshare,.df-toggle button,.lang1-bar a.lang1-sw,.card summary,.tv-btn){font-size:15px!important}
/* the top bar keeps its size (its buttons sit side by side and must not touch): the same 14px, a little less side room on a phone */
html body :is(#hubnavb,#chgtoggle,#hubback){font-size:14px!important}
@media (max-width:460px){html body :is(#hubnavb,#hubback){padding-left:9px!important;padding-right:9px!important}}
/* "Documents" keeps its width, so that "Show what's changed" keeps its own place (job NAV2F1: every button's place and size kept) */
html body #hubnavb{padding-left:7px!important;padding-right:6.2px!important}
/* the theme button keeps its size: a little larger, with less letter spacing */
html body .themebtn{font-size:11px!important;letter-spacing:.02em!important;padding:4.5px 11px!important}
html body button.aud-btn{padding:2px 10px!important;line-height:1.6!important}
html body button.exq{padding:0 6px!important;text-align:left}
html body a.cx-cardshare{display:inline-block;padding:3px 12px!important}
html body details>summary:not(.ckrow summary,#hubnavp summary){padding:6px 12px!important;box-sizing:border-box}
/* "Read the texts on this" outside a card (the grades legend of Laws in progress, the copies inside its folded groups, the two on Compare
   dates) takes the size of the copies in the cards (15px, the same line height), and in the legend also the page's own font, so that every
   copy of the button matches. On Laws in progress the rule reaches every copy on the page (main.lt2), so a copy in a group added later is
   reached too (job NAV2F2) */
html body :is(main.lt2,.cd section.item) details.ft5>summary{font-size:15px!important;line-height:1.4!important}
html body main.lt2 .glegend details.ft5>summary{font-family:var(--des1-serif)!important;font-size:15px!important;line-height:1.4!important}
html body .card summary::before{border:1px solid currentColor!important}

/* 4. hover (with a pointer only, so that a tap on a phone does not leave a button changed) and keyboard focus, both clearly visible */
@media (hover:hover){
  html body :is(button,summary:not(.ckrow summary,#hubnavp summary),input[type=button],input[type=reset],a.backbtn,a.cx-b,a.cx-cardshare):not(.cx,.gl1-btn,.sn-tg,.sn-btn,.cx-crumb,#chgbar button,.nav2-admin button,#hubback,#hubnavb,#chgtoggle,button.go,#ask button[type=submit],.box button:not(.gl1-btn),#totop,#df-stop,.df-toggle button[aria-pressed="true"],#fdwrap .fdadd,.ri-pick):hover{
    background-color:var(--des1-line)!important;border-color:var(--des1-head)!important;color:var(--des1-ink)!important}
}
html body :is(button,summary,input,a.backbtn,a.cx-b,a.cx-cardshare,.sn a):focus-visible{outline:3px solid var(--des1-head)!important;outline-offset:2px!important}

/* 5. the side menu (NAV1). At computer width: on the page's light blue, with a thin light-blue edge; the title small, muted and spaced; the
   items plain; the current item on a white (dark: card blue) row with a small red dot; the arrows in the text ink. */
html body .sn .sn-title{color:var(--des1-muted)!important;font-weight:600!important;font-size:12px!important;letter-spacing:.14em!important;}
html body .sn :is(.sn-list>li>a,li.sn-g>a){border:0;border-radius:8px;color:var(--des1-ink)!important;font-weight:600;background:transparent;margin:0 0 2px;padding:6px 9px;box-shadow:none!important}
html body .sn.sn-js li.sn-g>a{padding-right:36px}
html body .sn ul ul{border-left-color:var(--des1-line)!important}
html body .sn ul ul a{color:var(--des1-ink2)!important;border-radius:8px}
html body .sn a[aria-current="location"]{background:var(--des1-card)!important;color:var(--des1-ink)!important;box-shadow:0 1px 2px rgba(1,33,105,.10)!important}
html body .sn a[aria-current="location"]::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--des1-red);margin:0 8px 2px 0;vertical-align:middle}
html body .sn.sn-js li.sn-g{padding-right:0!important}
html body .sn .sn-tg{right:4px!important;top:4px!important;color:var(--des1-ink2)!important}
@media (hover:hover){html body .sn a:not([aria-current="location"]):hover,html body .sn .sn-tg:hover{background:var(--des1-card)!important;color:var(--des1-ink)!important}}
@media (min-width:1100px){html body .sn{background:var(--des1-page)!important;border-right:1px solid var(--des1-line)!important}}

/* At phone width: the folded Índice / Contents bar is an in-page button (light-blue tint and frame, rounded, the body serif); open, it shows
   "Cerrar" / "Close" next to its arrow (sidenav.js), and the list opens on a white (dark: card blue) panel */
@media (max-width:1099.98px){
  html body .sn.sn-js{border:1px solid var(--des1-btn-line)!important;border-radius:8px!important;background:var(--des1-btn)!important;padding:0!important}
  html body .sn.sn-js .sn-btn{color:var(--des1-ink)!important;font-family:var(--des1-serif)!important;font-weight:500!important;font-size:17px!important;min-height:46px!important;padding:8px 12px!important}
  html body .sn.sn-js .sn-list{border:1px solid var(--des1-line)!important;left:-1px!important;right:-1px!important;background:var(--des1-card)!important;border-radius:0 0 8px 8px!important}
  @media (hover:hover){html body .sn.sn-js .sn-btn:hover{background:var(--des1-line)!important;color:var(--des1-ink)!important}}
}
html body .sn-btn .sn-x{margin-left:auto;font-weight:500}
html body .sn-btn .sn-x[hidden]{display:none}

/* 6. the dark "what's changed" bar: its buttons framed in the thin light blue (never white), white labels in the body serif */
html body #chgbar button{border:1px solid var(--des1-band-line)!important;font-family:var(--des1-serif)!important;font-weight:400!important;font-size:14px!important;border-radius:8px!important}

/* 7. the checklist rows (check pages): the row stays a row; its open mark is in the text ink */
html body .ckrow summary::marker{color:var(--des1-ink)}

/* 8. the admin pages (Worker): the same 2px frame, bold label and focus ring; each keeps its own colour meaning (filled = the main action,
   red = ends or removes); on the pages whose buttons had no colour of their own (nav2-tint) they take the frame in the text navy and the tint */
html body.nav2-admin button{border-width:2px!important;border-style:solid!important;border-radius:4px!important;font-weight:700!important;cursor:pointer}
html body.nav2-tint button:not(.p,.sec){border-color:var(--nav2-ink)!important;background:var(--nav2-tint)!important;color:var(--nav2-ink)!important}
html body.nav2-tint button.p{border-color:var(--nav2-ink)!important}
html body.nav2-admin a.back{display:inline-block!important;border:2px solid var(--nav2-ink)!important;border-radius:4px!important;background:var(--nav2-tint)!important;color:var(--nav2-ink)!important;font-weight:700!important;font-size:15px!important;padding:7px 12px!important;text-decoration:none!important}
html body.nav2-tint .f a{border:2px solid var(--nav2-ink)!important;font-weight:700!important;border-radius:4px!important}
html body.nav2-tint .f a:not(.on){background:var(--nav2-tint)!important}
html body.nav2-admin :is(button,a.back,.f a):focus-visible{outline:3px solid var(--nav2-head)!important;outline-offset:2px!important}

/* 9. DES1: the top band, the page, the cards, the find box and the room between blocks */

/* 9a. the top band: navy, a thin red rule under it (drawn below the bar, so the bar keeps its height and the page keeps its place). Its
   buttons: a thin light-blue frame, rounded, white labels in the body serif at normal weight. The language switch, which sits just under
   the band (or in it, on the front pages), is a navy button of the same look. */
html body:not(.nav2-admin) #hubbar{background:var(--des1-navy)!important;border-bottom:0!important;box-shadow:0 2px 0 var(--des1-red)!important}
html body:not(.nav2-admin) :is(#hubback,#hubnavb,.lang1-bar a.lang1-sw){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}
html body:not(.nav2-admin) #hubnavb::after{border-right-width:1.5px!important;border-bottom-width:1.5px!important}
@media (hover:hover){html body:not(.nav2-admin) :is(#hubback,#hubnavb,.lang1-bar a.lang1-sw):hover{background:var(--des1-band-hover)!important;border-color:var(--des1-band-line)!important;color:#FFFFFF!important}}
html body:not(.nav2-admin) :is(#hubback,#hubnavb,#chgtoggle):focus-visible,html body:not(.nav2-admin) .lang1-bar.lang1-home a.lang1-sw:focus-visible{outline:3px solid var(--des1-band-focus)!important;outline-offset:2px!important}
/* "Show what's changed" (members' pages) sits in the band on a computer; on a phone it floats at the foot of the page, so there it takes the
   in-page look; while the changes are shown it keeps its own amber */
@media (min-width:641px){html body:not(.nav2-admin):not(.show-chg) #chgtoggle{background:var(--des1-navy)!important;color:#FFFFFF!important;border:1px solid var(--des1-band-line)!important}}
@media (max-width:640px){html body:not(.nav2-admin):not(.show-chg) #chgtoggle{background:var(--des1-btn)!important;color:var(--des1-ink)!important;border:1px solid var(--des1-btn-line)!important}}
html body:not(.nav2-admin) #chgtoggle{border-radius:8px!important;font-family:var(--des1-serif)!important;font-weight:400!important;box-shadow:none!important}
@media (hover:hover) and (min-width:641px){html body:not(.nav2-admin):not(.show-chg) #chgtoggle:hover{background:var(--des1-band-hover)!important;border-color:var(--des1-band-line)!important}}
@media (hover:hover) and (max-width:640px){html body:not(.nav2-admin):not(.show-chg) #chgtoggle:hover{background:var(--des1-line)!important;border-color:var(--des1-head)!important}}
html body.show-chg #chgtoggle{background-color:#E8B03C!important;border:1px solid #0E1A33!important;color:#0E1A33!important}
/* APL3F1 (T6; the owner's Agree on NAV2F1-1 = TRG-1140, 18 Oct 2026): at computer width "Show what's changed" sits 16px further left, clear of "Documents" / "Mostrar los cambios"
   (it was right:140px on the page itself; phones keep right:14px) */
@media (min-width:641px){html body:not(.nav2-admin) #chgtoggle{right:156px!important}}
/* APL3F1 (T6; the owner's Agree on NAV2F1-3 = TRG-1142): on phones the "Top" button sits just above "Show what's changed" (same corner), never over it:
   changes button bottom 14px (60px while the changes are shown) + its 32px height + an 8px gap
   MNT12B (28 Oct 2026): while the changes are shown, the Top button stands 14px clear above the open changes bar (the bar's own height, which the page script puts in --chgbar-h; 110px if the script has not run), as "Hide changes" does (MNT12F1) */
@media (max-width:640px){html body #totop{right:14px!important;bottom:54px!important}html body.show-chg #totop{bottom:calc(var(--chgbar-h,110px) + 14px)!important}}
/* the Documents list that opens from the band: a white (dark: card blue) panel with the thin light-blue line */
html body:not(.nav2-admin) #hubnavp{background:var(--des1-card)!important;border:1px solid var(--des1-line)!important;border-radius:8px!important}
html body:not(.nav2-admin) #hubnavp a{color:var(--des1-ink)!important;border-radius:8px}
/* the front pages (no top bar): the language row at the very top joins the navy masthead below it, so the two read as one band; the row's
   own place and the place of its words are kept (its ground reaches the masthead's width; the words stay where they were) */
html body:not(.nav2-admin) .lang1-bar.lang1-home{background:var(--des1-navy)!important;color:#FFFFFF!important;max-width:none!important;padding-left:max(16px,calc((100% - 1148px) / 2))!important;padding-right:max(16px,calc((100% - 1148px) / 2))!important}
html body:not(.nav2-admin) .lang1-bar.lang1-home .lang1-cur{color:#FFFFFF!important}
/* every navy masthead ends with the same thin red rule as the band (in place of the three-colour line) */
html body:not(.nav2-admin) header.mast::after{background:var(--des1-red)!important;height:2px!important}

/* 9b. the page: the light blue (dark: the deep navy blue) */
html:not(:has(body.nav2-admin)),html body:not(.nav2-admin){background-color:var(--des1-page)!important}

/* 9c. the cards: white (dark: card blue), a thin light-blue line, rounded, no shadow */
html body:not(.nav2-admin) :is(div.sheet,article.card,article.lc,details.sumblk,section.latest,section.grades,form.ctl,form.ctl2,p.pv,div.panelbox,div.tb,div.fbox,aside.ste,section.integrity,div.tbl-wrap,section.reuse,div.pe){
  background-color:var(--des1-card)!important;border:1px solid var(--des1-line)!important;border-radius:8px!important;box-shadow:none!important}
/* fewer boxes inside boxes: the two columns inside a Laws in progress card lose their own frame and keep only the coloured line on top */
html body:not(.nav2-admin) article.lc section.col{border:0!important;border-top:3px solid var(--des1-line)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
html body:not(.nav2-admin) article.lc section.col.col-off{border-top-color:var(--des1-navy)!important}
html body:not(.nav2-admin) article.lc section.col.col-why{border-top-color:var(--des1-head)!important}

/* 9d. a calmer layout: a little more room between the blocks (nothing moves off the page and no wording changes) */
html body:not(.nav2-admin) main.lt2 article.lc{margin-bottom:28px!important}
html body:not(.nav2-admin) :is(details.sumblk,section.latest,section.grades,form.ctl,form.ctl2){margin-bottom:24px!important}

/* 9e. the find box: on the page's light blue, with a thin light-blue edge; the box itself white (dark: card blue) with the button frame's
   light blue; the count in the navy (dark: the light blue) */
html body #fb{background:var(--des1-page)!important;color:var(--des1-ink)!important}
@media (max-width:1099.98px){html body #fb{border-bottom:1px solid var(--des1-line)!important}}
@media (min-width:1100px){html body #fb{border-right:1px solid var(--des1-line)!important;border-bottom:1px solid var(--des1-line)!important}}
html body #fb input#fb-q{background:var(--des1-card)!important;color:var(--des1-ink)!important;border:1px solid var(--des1-btn-line)!important;border-radius:8px!important}
html body #fb input#fb-q::placeholder{color:var(--des1-ink2)!important}
html body #fb .fb-n{color:var(--des1-count)!important}
html body #fb .fb-here{color:var(--des1-ink2)!important}
html body #fb .fb-here-l{color:var(--des1-head)!important}
html body #fb .fb-here-t{color:var(--des1-ink)!important}

/* 10. DES1: contrast (WCAG AA, 4.5:1 for text) and keyboard focus kept in both modes. Colours only, in the site's own colours; where light
   mode already passed, its colour is kept and only dark mode changes. */
:root{--des1-foot:#4A5562;--des1-mut:#56646B;--des1-badge-ink:#FFFFFF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--des1-foot:#8E98AD;--des1-mut:#8E98AD;--des1-badge-ink:#0B1222}}
:root[data-theme="dark"]{--des1-foot:#8E98AD;--des1-mut:#8E98AD;--des1-badge-ink:#0B1222}
/* the foot line of the public pages (its grey is set on the page itself): dark mode in the muted light grey */
html body div.pubfoot,html body div.pubfoot a{color:var(--des1-foot)!important}
/* white words on the light blue badges of dark mode ("Applies now", the "EU" chip, the phone "Top" button): dark words instead */
html body :is(.gbadge.g-now,.chip-who,button.totop),html body :is(.gbadge.g-now,.chip-who,button.totop) *{color:var(--des1-badge-ink)!important}
/* the small labels of the article cards ("What it says", "Official text") were drawn at 60% strength (and 85% again inside the official
   line): full strength, in the second ink */
html body article.card span.lab{opacity:1!important;color:var(--des1-ink2)!important}
/* the dates under the timeline of the short version were drawn at 60% strength: full strength, in the muted ink */
html body div.kc-axis{opacity:1!important;color:var(--des1-muted)!important}
/* the Register's table headings and small lines (their grey is set for light mode only): dark mode in the muted light grey */
html body .rg :is(th,.m,.m a),html body .rg td[data-l]::before{color:var(--des1-foot)!important}
/* the offices' bodies and notes on Who to contact (their grey has no dark value): dark mode in the muted light grey */
html body :is(.wtc .bd,.wtc-note){color:var(--des1-mut)!important}
/* links that had no colour of their own (the browser's blue, unreadable in dark mode): the site's blue */
html body :is(div.sheet a:not([class]),a.src){color:var(--des1-head)!important}
/* every "Read the texts on this" panel in dark mode on the hub's dark surface (the members' Sources and updates page kept a light panel there) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body div.ft5t{background-color:#121B30!important}}
:root[data-theme="dark"] body div.ft5t{background-color:#121B30!important}
/* keyboard focus on links, text boxes, lists, the plain-term words and the tables that scroll: the same clear 3px ring as the buttons (the
   browser's own ring was thin, and the plain-term words had none) */
html body :is(a,textarea,select,[tabindex]:not([tabindex="-1"]),div.tbl-wrap):focus-visible{outline:3px solid var(--des1-head)!important;outline-offset:2px!important}
/* inside a navy masthead the ring is the band's light blue */
html body header.mast :is(a,button,summary,input,[tabindex]):focus-visible{outline-color:var(--des1-band-focus)!important}
/* DES1F1: a masthead that is not navy in dark mode. On the pages whose own theme block (style#treaty-theme) turns the masthead's navy into
   light blue in dark mode (Laws in progress, English and Spanish), the band's light blue ring would not show on it: there the ring is the
   site navy, the colour of the masthead's words on those pages. Release scan step 26 (B8) measures the ring against every masthead */
@media (prefers-color-scheme:dark){html:not([data-theme="light"]):has(style#treaty-theme) body header.mast :is(a,button,summary,input,[tabindex]):focus-visible{outline-color:#012169!important}}
html[data-theme="dark"]:has(style#treaty-theme) body header.mast :is(a,button,summary,input,[tabindex]):focus-visible{outline-color:#012169!important}
/* "Skip the contents" shows at the top left when it takes the focus: over the navy band on the pages with the top bar, and on a phone over
   the front pages' navy language row, its ring is the band's light blue; on a computer the front pages show it over the find box, so
   there it keeps the page's blue */
html body:has(#hubbar) a.sn-skip:is([href],[tabindex]):focus-visible{outline-color:var(--des1-band-focus)!important}
@media (max-width:1099.98px){html body:has(.lang1-bar.lang1-home) a.sn-skip:is([href],[tabindex]):focus-visible{outline-color:var(--des1-band-focus)!important}}
/* the language switch below the band (by the links' rule above) and "Show what's changed" floating on a phone sit on the page: their ring
   in the page's blue, not the band's light blue */
@media (max-width:640px){html body:not(.nav2-admin) #chgtoggle:focus-visible{outline-color:var(--des1-head)!important}}
/* TRF1 (16 Oct 2026): the ticks and dots of the alert sign-ups (the "Get alerts" boxes and the daily-facts alert form) took the colour of the
   reader's system, not the site's: they take the treaty red (#C8102E; dark #E86A7D) from --des1-red, which the dark values above already swap. */
.fbox .chk input[type=checkbox],.df-opt input[type=checkbox],.df-opt input[type=radio]{accent-color:var(--des1-red)}

/* 11. HOME7 (20 Oct 2026, the owner, 20 Oct 03:02, points 4 and 5): ONE field style on every page, light and dark, and the chosen button shown as chosen.
   11a. every field (text, email, search, no type at all, textarea, list) is the question box's look: the card colour, the text ink, a thin light-blue frame, rounded.
        (The Worker's admin pages, body.nav2-admin, keep their own fields. The Name and Email boxes under "Say what is missing" had no type, so the rule for type=text missed them and the browser's own grey showed.) Colours and frame only:
        each page keeps the size and room of its own fields.
   11b. a check box or a round choice is drawn in the same look: the card colour, the same frame; ticked it is filled with the treaty red (as DES1 set for the alert boxes). */
html body:not(.nav2-admin) :is(input:not([type]),input[type=text],input[type=email],input[type=search],input[type=tel],input[type=url],input[type=number],input[type=password],input[type=date],textarea,select){
  background-color:var(--des1-card)!important;color:var(--des1-ink)!important;border:1px solid var(--des1-btn-line)!important;border-radius:8px!important}
html body:not(.nav2-admin) :is(input:not([type]),input[type=text],input[type=email],input[type=search],input[type=tel],input[type=url],input[type=number],input[type=password],input[type=date],textarea)::placeholder{color:var(--des1-muted)!important;opacity:1}
html body:not(.nav2-admin) :is(input:not([type]),input[type=text],input[type=email],input[type=search],input[type=tel],input[type=url],input[type=number],input[type=password],input[type=date],textarea,select):focus-visible{outline:3px solid var(--des1-head)!important;outline-offset:2px}
html body:not(.nav2-admin) :is(input[type=checkbox],input[type=radio]){-webkit-appearance:none!important;appearance:none!important;box-sizing:border-box!important;flex:none;width:18px!important;height:18px!important;min-width:18px;
  background-color:var(--des1-card)!important;background-repeat:no-repeat!important;background-position:center!important;background-size:14px 14px!important;border:1.5px solid var(--des1-btn-line)!important;border-radius:4px!important;
  vertical-align:-3px;cursor:pointer;color:var(--des1-ink)}
html body:not(.nav2-admin) input[type=radio]{border-radius:50%!important}
html body:not(.nav2-admin) input[type=checkbox]:checked{background-color:var(--des1-red)!important;border-color:var(--des1-red)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important}
html body:not(.nav2-admin) input[type=radio]:checked{background-color:var(--des1-red)!important;border-color:var(--des1-red)!important;background-image:radial-gradient(circle,#FFFFFF 0 38%,transparent 42%)!important}
html body:not(.nav2-admin) :is(input[type=checkbox],input[type=radio]):focus-visible{outline:3px solid var(--des1-head)!important;outline-offset:2px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body:not(.nav2-admin) input[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230B1222' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important}:root:not([data-theme="light"]) body:not(.nav2-admin) input[type=radio]:checked{background-image:radial-gradient(circle,#0B1222 0 38%,transparent 42%)!important}}
:root[data-theme="dark"] body:not(.nav2-admin) input[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230B1222' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important}
:root[data-theme="dark"] body:not(.nav2-admin) input[type=radio]:checked{background-image:radial-gradient(circle,#0B1222 0 38%,transparent 42%)!important}

/* 11c. the chosen button of a pair (Exact words / Plain words, and Light / Dark) is filled (the navy; dark: the light blue; in the top band: white with navy words), whatever
   the page's own button rules say (the two ID tests in :not() give it the weight to win), so the reader can see which one is on; the script sets aria-pressed="true" on it. */
html body button:is([data-words],[data-fxw],[data-set],[data-ver-btn])[aria-pressed="true"]:not(#h7-a):not(#h7-b){background-color:var(--des1-on)!important;border-color:var(--des1-on)!important;color:var(--des1-on-ink)!important;font-weight:700}
html body :is(.band,#hubbar) button:is([data-words],[data-fxw],[data-set])[aria-pressed="true"]:not(#h7-a):not(#h7-b){background-color:#FFFFFF!important;border-color:var(--des1-band-line)!important;color:#012169!important}

/* SITEFIX1 (1 Nov 2026; Troy 1 Nov 05:02 "1 yes", 04:47 standing rule: fixes that change no words people read): the look faults found by the site audit (SITEAUD1) and the page checks (MECH1), fixed once here, in the sheet every page loads, so a rebuild keeps them.
   Look only: no word is written, changed or removed by anything below. Check: tools/sitefix1_check.py (release scan step 100). */
/* the plain-words box on the full-text pages was stretched to the height of the exact words beside it and held one line; it is now only as tall as its words */
html body .fx-row{align-items:start}
/* "Back to the menu" sat right on the next heading; the same room as between other blocks */
html body .sn-back{margin-bottom:16px}
/* "Read the texts on this +" in a narrow table cell broke into three lines with the + alone; the two lines are balanced and the button's side room is smaller there */
html body details.rtx>summary{text-wrap:balance}
html body :is(td,th) details.rtx>summary:not(#sf1){padding-left:8px!important;padding-right:8px!important;font-size:13px!important;line-height:1.3!important}
/* the numbers in the coloured circles of the timeline boxes were dark on red, blue and green (about 3 to 1 or less); white on the circle */
html body :is(button.box,a.box) .num:not(#sf1){color:#FFFFFF!important}
:root[data-theme="dark"] body :is(button.box,a.box) .num:not(#sf1){color:#0B1222!important}   /* dark mode: the circles are the light red, blue, green and gold, so dark numbers */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body :is(button.box,a.box) .num:not(#sf1){color:#0B1222!important}}
/* the dots between the About links on the front page were pale on the light page (about 1.5 to 1); the site's muted ink */
html body .aboutline .sep{color:#5F6B82}
:root[data-theme="dark"] body .aboutline .sep{color:#8E98AD}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body .aboutline .sep{color:#8E98AD}}
/* the Ask button next to the two-row question box was stretched to its height; it keeps its own height */
html body form#askform{align-items:flex-start}
/* the floating buttons ("Back to the top", "Share a preview") covered the last line of the page and its footer link: room under the page's end */
html body.fb-on,html body:has(#cc-share){padding-bottom:72px}
/* the members' side menu: its "Contents" heading was scrolled up under the find box; it stays at the top of the menu's own column */
@media (min-width:1100px){html body nav.sn#sn-menu>.sn-title{position:sticky;top:0;z-index:3;margin:0;padding:0 0 6px;background:var(--surface,#FFFFFF)}}
/* the front page's three "Ask, check, say what is missing" cards were stretched to the height of the longest card (about 680 px for a card of a few lines); each is as tall as its own words */
html body .askgrid{align-items:start}
/* the About links at the foot of the front page broke inside a link on a phone ("Support this / site"); a link stays whole and the row breaks between links */
html body .aboutline{display:flex;flex-wrap:wrap;align-items:baseline}
html body .aboutline a{white-space:nowrap}
/* a phone: the top bar took up to 220 px of an 844 px screen (four or five rows); the buttons and the room between rows are a little smaller so the same buttons fit in fewer rows */
@media (max-width:460px){
  html body .band.sb .in{padding:6px 10px!important;gap:4px 8px!important}
  html body .band.sb .ctl{gap:4px!important}
  html body .band.sb :is(.btn,a.lang1-sw,a#hubback,a#hubprev,button#hubnavb,button[data-words],button[data-fxw],button[data-set]){padding:5px 8px!important;font-size:13.5px!important;min-height:32px!important;line-height:1.2!important}
  html body .band.sb a.site{font-size:15px!important}
}
/* a phone or narrow window: the find box that stays under the top bar took up to 185 px of an 844 px screen when the "You are here" line is long; a little less room around it and a slightly smaller line (the line still shows all its words) */
@media (max-width:1099.98px){
  html body #fb{padding:4px 10px 4px!important}
  html body #fb input#fb-q{min-height:36px!important}
  html body #fb .fb-b{width:36px!important;height:36px!important;min-width:36px!important}
  html body #fb .fb-here{margin:3px 0 0!important;font-size:12.5px!important;line-height:1.25!important}
}

/* SFX2A (1 Nov 2026; the owner 1 Nov 15:54 on the SFCTX1 cards, "in house colours as with everything visually needs"; non-word fixes rule 04:47): look only, no word is written, changed or removed by anything below.
   Colours: only the DES1 values this sheet sets on every page (var(--des1-...)), no colour of its own. Check: tools/sfx2a_check.py (release scan step 102). */
/* H: small labels ("Done", "Date fixed", "Expected", dates under titles, "Tap to enlarge") were 9.5 to 11.5 px; none is under 13 px now. The chart bars (.kc-seg) are left as they are. */
html body :is(span.lab,span.card-n,p.fn,span.eyebrow,span.zoom-hint,span.rid-note,span.dt,div.o1,div.o4,span.st,span.pe-t,span.ste-h,span.ste-t,span.t,a.cx,div.ofoot,div.ofoot span,footer.end p,div.ft5t,div.ft5t p){font-size:13px!important}
/* G (heading looks follow the house style): the very large opening headline of the short version, texts, front document and which-way pages is the usual headline size of the other pages; a section heading is never lighter than the line under it */
@media (min-width:700px){html body :is(header.masthead,.sec-head) h1.title{font-size:36px!important;line-height:1.15!important}}
@media (max-width:699.98px){html body :is(header.masthead,.sec-head) h1.title{font-size:30px!important;line-height:1.15!important}}
html body :is(section.cmpa-card,details.lw-old,div.pg,div.pg.lt,div.pg.bz,div.ckw,section.sec,section.sec.card.five)>h2{font-weight:700}
html body section.fx-grp>h2.fx-g-h{font-weight:600}
/* E: a contents line with nothing behind it ("The airport (0)") is shown as a plain line, not as a link that leads nowhere */
.sn a.sn-zero{display:block;padding:5px 6px;color:var(--des1-muted);cursor:default;text-decoration:none}
.sn a.sn-zero:hover{background:none;color:var(--des1-muted)}
@media (max-width:760px){.sn a.sn-zero{padding:9px 8px}}
/* L: on a phone a table whose columns are squeezed (sfx2a.js adds .sfx-cards) shows each row as a small card, the column's name above each part (the names are the table's own header cells) */
@media (max-width:700px){
  html body table.sfx-cards,html body table.sfx-cards :is(tbody,thead,tr,td,th){display:block;width:auto!important;min-width:0!important;max-width:100%;box-sizing:border-box}
  html body table.sfx-cards tr.sfx-head{display:none}
  html body table.sfx-cards tr{margin:0 0 12px;padding:8px 10px;background:var(--des1-card);border:1px solid var(--des1-line);border-radius:8px}
  html body table.sfx-cards :is(td,th){border:0!important;padding:4px 0!important;overflow-wrap:anywhere}
  html body table.sfx-cards :is(td,th)[data-label]::before{content:attr(data-label);display:block;font:700 13px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;color:var(--des1-muted);margin-bottom:1px}
}
/* A: the members' pages that have no site bar get the slim ask bar as a band before the page's first header; the look of the bar itself is in topbar.css */
.sfx-ask{width:100%;align-self:stretch;max-width:1180px;margin:8px auto;padding:0 18px;box-sizing:border-box;display:flex}
.sfx-ask .uxb1-bar{flex:1 1 260px;max-width:520px;display:flex;margin:0;border-radius:8px;overflow:hidden;background:var(--des1-card);border:2px solid var(--des1-band-line)}
.sfx-ask .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:9px 10px}
.sfx-ask .uxb1-bar input::placeholder{color:var(--des1-ink2);opacity:1}
.sfx-ask .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:9px 14px;cursor:pointer}
.sfx-ask .uxb1-bar:focus-within{outline:3px solid var(--des1-band-focus);outline-offset:1px}
@media (max-width:480px){.sfx-ask{padding:0 10px}.sfx-ask .uxb1-bar button{padding:9px 10px}}