/* THE PRODUCT BAR. The thin navy strip that names the four things this site is and marks which one
* you are reading.
*
* WHY IT IS ITS OWN FILE. It existed only inside index.html, so it appeared on the register, the
* intelligence briefing, the news desk and the country pages, and vanished the moment a reader
* opened the toolkit or a member state. Those two surfaces then had one way out, a brand link, and
* that is what made the site feel like separate sites rather than one. A component that has to look
* identical in three documents cannot be written three times.
*
* TRANSCRIBED FROM index.html, which stays the origin: it is the largest page on the site and is
* not being refactored to serve the smaller ones. The rules below are its rules, with only the
* home-portal exception left behind, because that exception is about a view that exists in that
* file alone.
*
* REQUIRES shared/tokens.css, for --mast, --mono, --s2, --s3 and --s4. Link tokens first. */
.pbar{background:var(--mast);position:relative}
.pbar .wrap{padding-top:11px;padding-bottom:11px}
.pbar nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
min-height:44px}
.pbar-brand{display:flex;align-items:center;min-height:44px;
font:600 11px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;
color:#D3DCE1;text-decoration:none;white-space:nowrap}
.pbar-brand:hover{color:#FFFFFF}
.pbar-nav{display:flex;align-items:stretch;gap:2px;margin:0;padding:0;list-style:none}
.pbar-nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;
font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
color:#C3CDD4;text-decoration:none;border-bottom:2px solid transparent}
.pbar-nav a:hover{color:#FFFFFF}
/* the current product is named, not merely coloured, so the mark survives a reader who cannot
distinguish the two greys */
.pbar-nav a[aria-current]{color:#FFFFFF;border-bottom-color:#FFFFFF}
.pbar a:focus-visible{outline:2px solid #FFFFFF;outline-offset:-2px}
/* THE WRAP. index.html already has one; a document that does not gets the same measure and gutters
here, so the bar lines up with the content beneath it on every surface. */
.pbar .wrap{max-width:1240px;margin:0 auto;padding-left:var(--s5, 48px);padding-right:var(--s5, 48px)}
@media (max-width:700px){
.pbar .wrap{padding-left:var(--s4, 24px);padding-right:var(--s4, 24px)}
}
/* THE COMPACT ROW, AND ITS BREAKPOINT IS A MEASURED NUMBER RATHER THAN A ROUND ONE.
The row gives up its inter-item gap and some padding and tracking rather than cutting a label.
That treatment used to start at 560px, which was right while the bar read
"Main page | Donor Intelligence | Register | News | Toolkit | Members". The labels have since
become "Atlas | Register | News & Insights | Toolkit | Countries": one item fewer but two longer
words, and the row now needs 626px at full padding. So between 561px and 625px it had no compact
treatment and no wrap either, and it overflowed by 26px. Measured on every page that carries the
bar, at 600px, before this line moved.
700px covers the whole band with room for a label to grow again. */
@media (max-width:700px){
.pbar nav{flex-wrap:wrap;gap:var(--s2) var(--s3)}
.pbar .wrap{padding-top:9px;padding-bottom:2px}
.pbar-nav{width:auto;margin-inline:calc(var(--s4) * -1);padding-left:var(--s4);
padding-right:12px;gap:0;
overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pbar-nav::-webkit-scrollbar{display:none}
.pbar-nav a{padding:0 6px;letter-spacing:.1em}
}
/* FIVE LABELS, NOT FOUR. The wrap used to start at 344px, which was right while the row carried
four products. With Members added the row is 14px over at 375px, so the last label is clipped on
the commonest phone width there is. Five uppercase mono words do not belong on one 375px line, so
the row wraps to two tidy rows instead of scrolling with a cut word on the end. */
@media (max-width:430px){
.pbar-nav{flex-wrap:wrap;overflow-x:visible;margin-inline:0;padding-left:0;padding-right:0;
row-gap:2px}
}
@media (prefers-reduced-motion:reduce){
.pbar *{animation-duration:.01ms !important;animation-delay:0s !important;
animation-iteration-count:1 !important;transition-duration:.01ms !important;
transition-delay:0s !important}
}
@media print{
.pbar{background:none;border-bottom:1px solid #999}
.pbar-brand,.pbar-nav a{color:#000}
}
/* ============================================================ THE MASTHEAD WASH
* A painterly two-colour wash across the navy band: light blue and a fainter warm orange.
*
* IN THE HOUSE TECHNIQUE, NOT A GRADIENT. This site already paints with displaced, blurred
* ellipses under a turbulence filter: #brushes on the home portal, #l2brush on the inner pages,
* #cwash for a country's flag. A flat linear gradient here would have been the easy thing and
* would have read as a different hand. So this is the same construction, small enough to live as
* one data URI in one rule rather than nine inlined copies of an SVG.
*
* IT LANDS ON header.top AND .gccp-top, WHICH IS WHY THE MAIN PAGE IS SAFE: the portal hides
* header.top entirely, so a rule aimed at it cannot reach that view.
*
* The opacities are the ones this site already uses for paint, .055 to .10, and they are over navy
* rather than paper, so the wash reads as depth and every label above it keeps its contrast. */
/* IT IS A LAYER, NOT A BACKGROUND IMAGE. The first attempt set background-image on the masthead
and it never rendered: every page paints that band with a `background:` SHORTHAND in its own
stylesheet, and a shorthand resets background-image to none. Since this file has to load FIRST
so a page can still override a token deliberately, the page always wins that argument. Measured
before and after: the band was 35,44,92 at every sampled pixel, spread of zero.
A pseudo-element cannot be wiped by a shorthand, and it is also how this site already paints:
#brushes, #l2brush and #cwash are all separate layers rather than backgrounds. */
/* isolation:isolate makes the band its own stacking context, so a negative z-index on the wash is
contained: it paints above the band's own background and below everything in it. The first
attempt instead lifted every child with `header.top>*{position:relative;z-index:1}`, which has
higher specificity than .pagetab and therefore overrode the tab's `position:absolute`. A relative
box with right:48px does not anchor to the right, it shifts LEFT by 48px, which is exactly where
the tab appeared: at x -48, clipped by the edge of the page. One rule too many, and the fix is to
delete it rather than fight it. */
header.top, .gccp-top{position:relative;isolation:isolate}
header.top::before, .gccp-top::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='a' x='-35%25' y='-60%25' width='170%25' height='220%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.013' numOctaves='4' seed='9' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='70' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='18'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23a)'%3E%3Cellipse cx='250' cy='72' rx='420' ry='62' fill='%2378ADEE' opacity='0.55' transform='rotate(-9 250 72)'/%3E%3Cellipse cx='990' cy='128' rx='450' ry='56' fill='%23F2A24A' opacity='0.30' transform='rotate(7 990 128)'/%3E%3Cellipse cx='630' cy='38' rx='340' ry='44' fill='%2396BEF2' opacity='0.34' transform='rotate(-4 630 38)'/%3E%3C/g%3E%3C/svg%3E");
/* STRETCHED, NOT CROPPED. `cover` scales the artwork to fill and crops the overflow, so a band
of a different height samples a different part of it: the register masthead stayed near the
base navy while the shorter member-state band landed on a dense patch and lifted to
(129,104,55), taking four labels below 4.5:1. The artwork is abstract, so mapping the whole of
it onto whatever height the band happens to be is both harmless and predictable. */
background-repeat:no-repeat;background-size:100% 100%;background-position:center;
/* the strokes carry their own alpha; this is the one dial for the whole wash */
opacity:.30;
}
@media print{ header.top::before, .gccp-top::before{display:none} }
/* ============================================================ THE PAGE TAB
* The orange tab that names the surface you are on, hanging off the lower edge of the masthead.
*
* It existed on the toolkit alone. It is now the marker for every surface that is not the main
* page, and it is larger than the toolkit's original, which was 13px and easy to miss against a
* band that size.
*
* IT IS NOT A LINK AND IT IS NOT NAV. The bar above already says where you can go and marks where
* you are; this says what you are reading, once, at a size you cannot miss. Presentation only, so
* it is aria-hidden and the same word is in the page's own heading and title for anyone who cannot
* see it. */
.pagetab{
position:absolute;right:var(--s5, 48px);bottom:0;
padding:9px 26px 8px;
background:var(--orange, #A55A12);color:#FFFFFF;
font:600 15px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,14px 100%);
pointer-events:none;
}
@media (max-width:900px){ .pagetab{right:var(--s4, 24px);padding:8px 20px 7px;font-size:13px} }
/* On a phone the band is short and the strip beneath it is long, so the tab stops hanging and
simply follows the strip. */
@media (max-width:640px){
/* the inset matters: static makes the tab a sibling of .wrap inside a .top with no padding, so
without it the tab sits at x=0 while everything it follows is inset 24px */
.pagetab{position:static;display:inline-block;margin-top:12px;margin-left:var(--s4, 24px);
clip-path:none;border-radius:2px}
}
/* DARK MODE TAKES A DARK FOREGROUND, and this is the one place a colour is written literally.
--orange is a token that deliberately flips to a LIGHT orange (#E8A55A) for a dark ground, while
the foreground above was a hardcoded white that did not flip with it. White on that orange is
2.11:1, which is unreadable and was shipped. Every ink token also flips in this block, so a
token here would flip back to pale and reproduce the fault; #171A2B is the light scheme's own
ink, and on #E8A55A it measures 8.04:1. */
@media (prefers-color-scheme:dark){ :root:not([data-theme='light']) .pagetab{color:#171A2B}}
@media print{ .pagetab{display:none} }
/* ==========================================================================
THE SITE SIGNATURE FOOTER, ONE IMPLEMENTATION FOR ALL PAGES.
There were four footers before this: the home page's three-column one, a flat row of links on the
five generated notice pages, the photo and credit alone on the seven country pages under a
completely separate .gccp-foot system, and nothing at all on the toolkit. Measured at 1270px they
were 117, 105, 89 and 0 pixels tall, with three different link treatments, and two of the four
offered no route to Privacy or Terms.
The shape is the one Ali specified: FAQ and Connect far left, his photo and credit centred, Terms
of Use and Privacy Policy far right. Every page loads this file, so this is where it belongs.
index.html keeps its own inline copy of these rules, which loads after this file and therefore
still wins, so the reference page is untouched by this block.
========================================================================== */
footer.sig{position:relative;border-top:1px solid var(--line);background:var(--paper);
margin-top:var(--s5)}
footer.sig .wrap{position:relative;z-index:1;max-width:1240px;margin:0 auto;
padding:var(--s4) var(--s5)}
/* --serif, NOT --sans. tokens.css keeps system sans for dense values and the search field, and a
byline is neither. index.html already overrode the link half of this line to --serif, so serif
was the intent; it just never reached the other thirteen pages or the words beside the name. */
footer.sig p{margin:0;display:flex;align-items:center;gap:11px;justify-content:center;
font:500 12.5px/1.6 var(--serif);color:var(--ink-2)}
footer.sig a{display:inline-flex;align-items:center;min-height:40px;
font:600 14px/1.6 var(--serif);color:var(--accent);
text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
letter-spacing:.15px}
footer.sig a:hover{color:var(--accent-2)}
/* the portrait: a circle beside the credit, growing a touch and glowing warm on hover */
footer.sig a.sig-ava{flex:0 0 auto;min-height:0;border-radius:50%;line-height:0;
text-decoration:none;box-shadow:0 0 0 1px var(--line-2),0 2px 7px rgba(20,24,36,.14);
transition:box-shadow .18s ease,transform .18s ease}
footer.sig a.sig-ava img{width:40px;height:40px;border-radius:50%;display:block;object-fit:cover}
footer.sig a.sig-ava:hover,footer.sig a.sig-ava:focus-visible{transform:scale(1.14);
box-shadow:0 0 0 1px #E7B23A,0 0 16px 3px rgba(242,194,74,.55)}
@media (prefers-reduced-motion:reduce){
footer.sig a.sig-ava:hover,footer.sig a.sig-ava:focus-visible{transform:none}
}
footer.sig .sig-cols{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
gap:var(--s4)}
footer.sig .sig-col{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
footer.sig .sig-col-l{align-items:flex-start}
footer.sig .sig-col-r{align-items:flex-end}
/* the four meta links are mono and quiet, so they read as site furniture rather than as content */
/* 26px, not 32. The row was carrying 17.6px of type in a 32px box, which read as slack rather
than as air once four of them stacked. 26 is still above the 24px minimum target size, so the
links stay as tappable as they were; anything under 24 would have traded a real requirement for
a visual preference. */
footer.sig .sig-col a{min-height:26px;font:600 12.5px/1.6 var(--mono);letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-3);text-decoration:none}
footer.sig .sig-col a:hover{color:var(--accent);text-decoration:underline;
text-decoration-thickness:1px;text-underline-offset:3px}
footer.sig .sig-col a[aria-current]{color:var(--ink)}
footer.sig .sig-col a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
footer.sig .sig-cols p{justify-content:center}
/* one column on a phone, and the credit leads, because a name above two pairs of links reads as a
signature while a name buried between them reads as a list item */
@media (max-width:700px){
footer.sig .sig-cols{grid-template-columns:1fr;justify-items:center;gap:var(--s3)}
footer.sig .sig-cols p{order:-1}
footer.sig .sig-col{flex-direction:row;gap:var(--s4);align-items:center}
footer.sig .wrap{padding:var(--s4)}
}
/* THE RIGHTS LINE. It lives INSIDE the credit span, not as a fourth child of .sig-cols. That grid
is three columns and its middle cell is the holding the portrait and the credit, so a new
sibling would have become a fourth column, and the phone rule that pulls the middle cell up with
order:-1 targets that
directly. Putting the line inside the span leaves both untouched.
Set in the mono face at 10px with open tracking, which is this site's own treatment for labels
and metadata and the right register for a notice: present, legible, and not asking to be read
before the name above it. --ink-3 rather than the muted token because muted measures 4.45:1 on
this ground and AA wants 4.5. */
/* ITS OWN BAND, NOT A SECOND LINE OF THE CREDIT, and the render is what settled it. Sitting
inside the credit span it was WIDER than the name above it, both left-aligned from the same
point, so the middle cell became a lopsided L and the whole three-column composition stopped
reading as centred. Its sentence-case mono also sat oddly between two columns of uppercase
links tracked out to .14em.
It is now a sibling of the three-column nav rather than a fourth child of it, so the grid and
the phone rule that reorders the middle cell with order:-1 are both untouched. Centred, full
width, with a hairline above: the footer's closing line rather than a competitor to the credit.
11.5px against the 12.5px of the links either side, one notch quieter, and the same open
tracking so it belongs to the same system. Both were a point smaller until the type floor
was raised; the gap between them is the part that carries the meaning, not the absolute size. */
footer.sig .sig-rights{margin:10px 0 0;padding-top:11px;
border-top:1px solid var(--line);text-align:center;
font:400 11.5px/1.6 var(--mono);letter-spacing:.1em;color:var(--ink-3)}
@media (max-width:640px){
footer.sig .sig-rights{margin-top:var(--s3);padding-top:13px;letter-spacing:.08em}
}
/* ==================== PHONE ONLY: the product bar in two rows, not three ====================
MEASURED at 390px: the bar was 153px, a 44px brand line plus a nav list wrapping to three rows
at 90px, because five labels at 12px with 12px of padding each need more than one 342px row can
hold and the gaps pushed the fifth onto a line of its own.
The labels are not shortened and nothing is hidden, because a nav that hides a destination on a
phone has moved the problem rather than solved it. The padding between items comes down instead,
which is space that only exists to separate a pointer's hover target and is not needed when the
target is a finger arriving in one place. Each item keeps a 44px height, so every destination is
still a full-size tap target; the row simply stops being three rows deep.
Above this query the bar is untouched. */
@media (max-width:600px){
.pbar .wrap{padding-top:6px;padding-bottom:4px}
.pbar nav{gap:var(--s2)}
.pbar-brand{min-height:38px}
.pbar-nav{gap:0 2px}
/* 44, NOT 40. These are the site's primary destinations and a finger has to land on one
of five. Forty was chosen to save height and it costs eight pixels to fix, which is
not a trade worth making against a target-size minimum. */
.pbar-nav a{padding:0 7px;min-height:44px}
}
/* PHONE ONLY: the furniture is tappable. index.html REDECLARES the footer column, so these two
rules exist in both files and must move together, which is the trap the tightening commit
before this one wrote down. Measured at 390px: the meta links were 26px and the portrait 40. */
@media (max-width:600px){
.pbar-brand{min-height:44px}
footer.sig .sig-col a{min-height:44px}
footer.sig a.sig-ava{width:44px;height:44px}
footer.sig a.sig-ava img{width:44px;height:44px}
}
/* ============================================ PHONE ONLY: THE CHROME STOPS REPEATING ITSELF
* Measured at 390x844 on every surface that carries the band: the bar is 150px and the band
* another 200, so 350px, forty one per cent of the first screen, before a page says anything of
* its own. The Atlas put its first figure at y=590, the register showed one row out of 689, and
* connect reached its first paragraph at y=1072.
*
* What was in that 350px was mostly the same words twice. The bar already carries the site name
* as a link home, and the band repeated it underneath in full, 26px lower, as a second link to
* the same place. The band also listed the six member states, which are decorative here, carry
* no links, and on the toolkit and connect wrapped to three lines and left the small decorative
* rule beside them stranded against a block of text.
*
* SO THE TWO LINES OF TEXT GO AND EVERYTHING ELSE STAYS. The band itself stays, and so does the
* two colour brush behind it, and so does the orange tag: those are deliberate and the tag is
* the one thing in the band that is not said anywhere else above it. What is left is a short
* branded strip naming the surface, which is what the band was for.
*
* Nothing here can reach the main page: the portal hides header.top outright, as the note at the
* top of this file records, and the members band is a different element again.
*
* THE MEMBERS PAGES USE THEIR OWN NAMES for the same two lines, .gccp-h1 and .gccp-kick, and both
* are paragraphs rather than headings, so hiding them takes nothing out of the outline. Each page
* states its own name in its own h1 further down.
*
* AND THE TOOLKIT'S SECTION STRIP GOES on a phone, which is the one judgement here rather than a
* measurement. It holds nine links, four themes and five jurisdictions, 1445px of them inside a
* 342px box. Under 480px it is set to nowrap with overflow-x auto and then scrollbar-width none
* and ::-webkit-scrollbar display none, so it scrolls with every cue that it scrolls removed: a
* reader sees FOUNDATIONS AND CONTEXT REGULATION, GOVE and nothing tells them there is more.
* Restoring a fade would fix the cue and keep the duplication; letting it wrap costs about 235px
* for the same. All nine destinations are already on the page 314px below, under BY THEME and BY
* JURISDICTION, each with its paper count and reading time, which is the better version of the
* same control. So on a phone the page keeps the good copy and drops the broken one. Above 600px
* nothing changes and it wraps as it always did. */
/* THE body PREFIX IS LOAD ORDER, NOT DECORATION. This file is linked before each page's own
stylesheet, and two of them restyle these very elements: shared/doc.css and the toolkit both
set header.top .kick to display:flex at the same specificity as header.top .kick, so at equal
weight the later sheet won and the line stayed on screen while the brandline beside it
vanished, because nothing declares display on the brandline. Rather than fix the one selector
that lost, every selector here out-specifies a page level rule, so the next page sheet to
restyle one of these cannot quietly switch it back on. */
@media (max-width:600px){
body header.top .brandline, body header.top .kick,
body .gccp-top .gccp-h1, body .gccp-top .gccp-kick{display:none}
body nav.sections .secrow{display:none}
}
/* ==================== PHONE ONLY: a tap says it landed
* Checked every control a finger reaches on this surface against every :active rule loaded,
* and these had none: the product bar links on every page, the news place, topic and read
* links, the document index rows, the more link and the way back from a country profile. The
* register rows, the category cards, the append control and the landing tiles already had one.
*
* WHAT THEY DO IS WHAT HOVER ALREADY DOES, because hover never fires on a phone and a state
* was already chosen for each of these. So nothing new is invented, no colour is added and no
* transform is introduced, which is also why none of this needs a reduced motion guard: a
* colour is not motion.
*/
/* the bar sits on the dark masthead, where a soft light tint reads as a press and the
white the hover already uses carries the rest */
@media (max-width:600px){
.pbar-nav a:active{color:#FFFFFF;background:rgba(255,255,255,.10)}
.pbar-brand:active{background:rgba(255,255,255,.10)}
}
/* ============================================ AN EXPLICIT DARK CHOICE
* These are the same dark values as the blocks above, answering to a chosen theme
* rather than to the operating system, because a media query cannot be changed from
* script and the toggle has to work on a machine set to light.
* Generated from the prefers-color-scheme blocks in this same file, so the two can
* never drift: edit the block above and regenerate, never edit one of these by hand. */
:root[data-theme='dark'] .pagetab{color:#171A2B}
/* ============================================================ THE THEME TOGGLE
* ANTI_SLOP_BRIEF
* bold move a 32px stamp in the corner holding one emoji, which swaps. Restraint is the move:
* no pill, no track, no sliding knob, no label. A reference work does not need a
* settings widget to change its own light.
* type the emoji Ali asked for, at 15px. Small enough to read as a mark rather than as a
* picture, which is the difference between a stamp and a sticker.
* colour none introduced. --paper for the face and --line-2 for the hairline, so the chip is
* self-contained and legible over the navy bar on thirteen pages and over pale paper
* on the portal, where the bar is hidden. It flips with the tokens like everything
* else, so the control obeys the thing it controls.
* shape one independent control, so a chip. Not a row, not a card, not a menu.
* verifiable it either changes the theme and remembers it across pages, or it does not.
*
* WHERE, AND WHY THERE. Fixed at top 17, right 26. On the thirteen pages that carry the product bar
* that centres it in the bar's 66px band, and the bar's nav ends 155px short of the right edge at
* 1440, so the two cannot meet. On the portal the bar is hidden, so the same coordinates put it in
* the empty top-right corner, clear of the centred title. Measured on both before it was placed.
*
* LAPTOP ONLY, as asked. Hidden below 900px, which is the breakpoint this site already uses most.
* A phone follows its own system setting, which is the right default on a device that has one.
*
* THE GLYPH IS CHOSEN IN CSS, NOT IN SCRIPT, so it cannot flash the wrong face on the way in. Both
* are in the markup and the cascade shows one. The moon offers the dark it does not have yet, and
* the sun offers the light back, which is the action rather than the state. */
.themetoggle{position:fixed;top:17px;right:26px;z-index:80;display:none;
width:32px;height:32px;padding:0;margin:0;border-radius:50%;cursor:pointer;
/* THE EDGE IS --ink-3, NOT --line-2, AND THE REASON IS FOUR GROUNDS RATHER THAN TASTE.
This chip sits on the navy bar on thirteen pages and on the page's own ground on the portal,
in two schemes, so it has four backgrounds to survive. Measured every candidate against all
four. --line-2 is 9.19:1 on navy in light and then 1.35 on pale paper and 1.54 on the dark
bar, so the ring simply disappears in three of the four. --ink-3 gives 5.44, 6.17 and 7.45 on
those three, and 2.28 on navy in light, where the chip's own pale face against navy is doing
the separating instead. So every state has a boundary well past 3:1, which is what 1.4.11
actually asks, rather than one token that reads well in the state you happened to look at. */
border:1px solid var(--ink-3);background:var(--paper);
line-height:1;text-align:center;
-webkit-appearance:none;appearance:none;
box-shadow:0 1px 3px rgba(20,24,36,.10);
transition:border-color .16s ease-out, transform .16s ease-out, box-shadow .16s ease-out}
@media (min-width:900px){ .themetoggle{display:grid;place-items:center} }
.themetoggle:hover{border-color:var(--accent);transform:translateY(-1px);
box-shadow:0 3px 9px rgba(20,24,36,.16)}
.themetoggle:active{transform:translateY(0)}
.themetoggle:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.themetoggle .tt-g{font-size:15px;line-height:1;display:block;
font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
/* one glyph at a time, decided by the cascade in all four states */
.themetoggle .tt-sun{display:none}
@media (prefers-color-scheme:dark){
:root:not([data-theme='light']) .tt-moon{display:none}
:root:not([data-theme='light']) .tt-sun{display:block}
}
:root[data-theme='dark'] .tt-moon{display:none}
:root[data-theme='dark'] .tt-sun{display:block}
:root[data-theme='light'] .tt-moon{display:block}
:root[data-theme='light'] .tt-sun{display:none}
@media (prefers-reduced-motion:reduce){
.themetoggle{transition:none}
.themetoggle:hover{transform:none}
}
@media print{ .themetoggle{display:none} }