/* The overview (eclipse.html), the eclipse pages and the country pages (src/eclipse-page-text.js);
   the rest comes from about.css. Colours and the table follow place.css. */
.eclipse-crumbs{
margin:0 0 4px;
color:#b8c7cc;
font-size:14px}
.eclipse-lead{
font-size:18px;
line-height:1.6}
.eclipse-note{
color:#b8c7cc;
font-size:14px}
.eclipse-section{
margin-top:32px}
.eclipse-actions{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px 20px}
.eclipse-action{
display:inline-flex;
align-items:center;
min-height:42px;
padding:8px 14px;
border:1px solid #ffcf52;
border-radius:6px;
text-decoration:none}
.eclipse-table-wrap{
overflow-x:auto}
.eclipse-table{
width:100%;
border-collapse:collapse;
font-size:14px}
.eclipse-table th,.eclipse-table td{
padding:6px 8px;
border-bottom:1px solid rgba(255,255,255,.12);
text-align:start;
vertical-align:top}
.eclipse-table td{
font-family:var(--font-mono)}
.eclipse-table td:last-child{
font-family:inherit}
.eclipse-partial td:last-child{
font-family:var(--font-mono)}
.eclipse-table th a{
color:inherit}
/* The score as the city seeker shows it: gold, the number in black. */
.eclipse-score{
display:inline-block;
min-width:2.2em;
margin-inline-start:6px;
padding:0 5px;
border-radius:4px;
background:#ffcf52;
color:#000;
font:500 12px/1.6 var(--font-mono);
text-align:center}
.eclipse-best{
padding-inline-start:1.4em}
.eclipse-best li{
margin:8px 0}
.eclipse-facts{
display:block;
color:#b8c7cc;
font:400 13px/1.5 var(--font-mono)}
.eclipse-moments{
margin:0;
padding:0;
list-style:none;
border-inline-start:2px solid #ffcf52}
.eclipse-moments li{
display:grid;
grid-template-columns:7em 1fr;
gap:12px;
padding:8px 0;
padding-inline-start:14px;
border-bottom:1px solid rgba(255,255,255,.12)}
.eclipse-moments time{
color:#ffcf52;
font-family:var(--font-mono);
direction:ltr}
.eclipse-neighbours{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
gap:12px 24px;
margin-top:28px}
.eclipse-figures{
display:grid;
grid-template-columns:max-content 1fr;
gap:6px 16px;
margin:0 0 16px}
.eclipse-figures div{
display:contents}
.eclipse-figures dt{
color:#b8c7cc}
.eclipse-figures dd{
margin:0;
font-family:var(--font-mono)}
.eclipse-kind{
margin-inline-start:8px;
padding:0 6px;
border:1px solid var(--line);
border-radius:4px;
font-size:12px}
.eclipse-kind--total{
border-color:#ffcf52;
background:#ffcf52;
color:#000}
.eclipse-kind--annular,.eclipse-kind--hybrid{
border-color:#ffcf52;
color:#ffcf52}
/* On a phone the table of countries keeps the country, the duration and the best place. */
@media (max-width:560px){
.eclipse-countries th:nth-child(2),.eclipse-countries td:nth-child(2),
.eclipse-countries th:nth-child(4),.eclipse-countries td:nth-child(4),
.eclipse-countries th:nth-child(5),.eclipse-countries td:nth-child(5){
display:none}
.eclipse-countries td{
font-family:inherit}
.eclipse-moments li{
grid-template-columns:5.5em 1fr}
.eclipse-figures{
grid-template-columns:1fr}
.eclipse-figures dd{
margin-bottom:6px}
}
/* The still of the globe at the top of an eclipse page: a picture that opens the viewer. */
.eclipse-still{
position:relative;
display:block;
margin:16px 0 20px;
overflow:hidden;
border:1px solid rgba(255,255,255,.2);
border-radius:8px;
background:#06172a;
text-decoration:none}
.eclipse-still img{
display:block;
width:100%;
height:auto}
.eclipse-still__open{
position:absolute;
inset-inline-start:12px;
bottom:12px;
display:inline-flex;
align-items:center;
min-height:44px;
padding:8px 16px;
border-radius:6px;
background:#ffcf52;
color:#03101d;
font-weight:700;
white-space:nowrap}
.eclipse-still:hover .eclipse-still__open{
background:#ffda63}
.eclipse-still:focus-visible{
outline:2px solid #ffcf52;
outline-offset:2px}
/* The overview and a country page: wider than a text page, for the cards. */
.about:has(#eclipse-content:is([data-eclipse-render="overview"],[data-eclipse-render="country"])){
max-width:1040px}
#eclipse-content [data-filtered]{
display:none}
/* The partial eclipses only with the setting "Show partial eclipses", which src/eclipse-page.js
   reads; without the script they stay hidden, as the setting is off by default. */
#eclipse-content[data-eclipse-render="overview"]:not([data-show-partial]) :is([data-kind="partial"],[data-filter="partial"],.eclipse-count-partial){
display:none}
/* The next eclipse at the top: its still beside its facts, above them on a phone. */
.eclipse-next{
display:grid;
grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
margin:24px 0 8px;
overflow:hidden;
border:1px solid #ffcf52;
border-radius:10px;
background:#06172a}
.eclipse-next__still img{
display:block;
width:100%;
height:100%;
object-fit:cover}
.eclipse-next__body{
display:flex;
flex-direction:column;
gap:12px;
padding:20px 22px}
.eclipse-next__body>*{
margin:0}
.eclipse-next__eyebrow{
color:#ffcf52;
font:600 12px/1 var(--font-mono);
letter-spacing:.12em;
text-transform:uppercase}
.eclipse-next h2{
color:#fff;
font-size:28px;
line-height:1.2}
.eclipse-next h2 .eclipse-kind{
vertical-align:middle}
.eclipse-next__count{
color:#ffcf52;
font:500 20px/1.2 var(--font-mono)}
.eclipse-chips{
display:flex;
flex-wrap:wrap;
gap:6px;
padding:0;
list-style:none}
.eclipse-chips li{
padding:2px 8px;
border:1px solid rgba(255,255,255,.2);
border-radius:999px;
font-size:13px}
.eclipse-next .eclipse-actions{
margin-top:auto}
.about .eclipse-action--primary{
border-color:#ffcf52;
background:#ffcf52;
color:#03101d;
font-weight:700}
.about .eclipse-action--primary:hover{
background:#ffda63}
/* The filter by kind and the years, at the top of the screen while the dates scroll by. */
.eclipse-filter{
position:sticky;
top:0;
z-index:2;
display:flex;
align-items:center;
gap:6px;
margin:8px -4px 0;
padding:10px 4px;
overflow-x:auto;
scrollbar-width:none;
border-bottom:1px solid rgba(255,255,255,.12);
background:#03101d}
.eclipse-filter__kinds,.eclipse-filter__years{
display:flex;
gap:6px}
.eclipse-filter__kinds{
padding-inline-end:6px;
border-inline-end:1px solid rgba(255,255,255,.2)}
.eclipse-filter button,.eclipse-filter a{
min-height:32px;
padding:4px 10px;
border:1px solid rgba(255,255,255,.2);
border-radius:999px;
background:none;
color:#87d7d2;
font:500 13px/1.4 var(--font-mono);
text-decoration:none;
white-space:nowrap;
cursor:pointer}
.eclipse-filter button[aria-pressed="true"]{
border-color:#ffcf52;
background:#ffcf52;
color:#03101d}
.eclipse-filter .eclipse-filter__countries{
margin-inline-start:auto}
.eclipse-period{
margin:28px 0 0;
font-size:20px}
.eclipse-period small{
margin-inline-start:10px;
color:#8fa3aa;
font:400 13px/1 var(--font-mono)}
/* A card per eclipse with a path up to 2033. */
.eclipse-cards{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:14px;
margin:16px 0 0;
padding:0;
list-style:none}
.about .eclipse-card{
display:flex;
flex-direction:column;
height:100%;
overflow:hidden;
border:1px solid rgba(255,255,255,.14);
border-radius:8px;
background:#06172a;
color:inherit;
text-decoration:none}
.about .eclipse-card:hover{
border-color:#ffcf52}
.eclipse-card picture,.eclipse-next__still picture{
display:block}
.eclipse-card img,.eclipse-card__blank{
display:block;
width:100%;
height:auto;
aspect-ratio:16/10;
object-fit:cover;
background:#0a2036}
.eclipse-card__body{
display:flex;
flex-direction:column;
gap:6px;
padding:10px 12px 12px}
.eclipse-card__year{
color:#ffcf52;
font:600 12px/1 var(--font-mono);
letter-spacing:.08em}
.eclipse-card__head{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
gap:6px}
.eclipse-card__date{
color:#87d7d2;
font-weight:700;
font-size:16px}
.eclipse-card .eclipse-kind,.eclipse-line .eclipse-kind,.eclipse-tile .eclipse-kind{
justify-self:start;
margin:0}
.eclipse-card__where{
color:#b8c7cc;
font-size:13px;
line-height:1.45}
.eclipse-card--next{
border-color:#ffcf52}
.eclipse-card--past{
opacity:.6}
.eclipse-card--past .eclipse-card__year{
color:#8fa3aa}
/* The duration against the longest of the overview. */
.eclipse-bar{
display:flex;
align-items:center;
gap:8px;
color:#b8c7cc;
font:500 12px/1 var(--font-mono);
white-space:nowrap}
.eclipse-bar>span{
flex:1;
min-width:40px;
height:4px;
overflow:hidden;
border-radius:2px;
background:rgba(255,255,255,.1)}
.eclipse-bar i{
display:block;
height:100%;
background:#ffcf52}
.eclipse-partials{
margin:16px 0 0;
color:#8fa3aa;
font-size:13px;
line-height:1.9}
.eclipse-partials .eclipse-kind{
margin:0 4px 0 0}
/* After 2033 a block per decade, the first one open. */
.eclipse-decade{
margin-top:10px;
border:1px solid rgba(255,255,255,.14);
border-radius:8px;
background:#06172a}
.eclipse-decade>summary{
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:4px 14px;
padding:12px 14px;
cursor:pointer;
list-style:none}
.eclipse-decade>summary::-webkit-details-marker{
display:none}
.eclipse-decade>summary::before{
content:"▸";
color:#ffcf52}
.eclipse-decade[open]>summary::before{
content:"▾"}
.eclipse-decade>summary b{
color:#ffcf52;
font:600 18px/1 var(--font-mono)}
.eclipse-decade>summary span{
color:#b8c7cc;
font-size:13px}
.eclipse-decade .eclipse-partials{
margin:0;
padding:8px 14px 12px}
.eclipse-lines{
margin:0;
padding:0 14px;
list-style:none}
.eclipse-line{
display:grid;
grid-template-columns:9em 7em minmax(0,1fr) 150px;
align-items:center;
gap:12px;
padding:8px 0;
border-top:1px solid rgba(255,255,255,.08)}
.eclipse-line>a{
font-weight:600}
.eclipse-line .eclipse-card__where{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap}
/* A tile per country, with a search above them. */
.eclipse-search input{
width:100%;
max-width:340px;
min-height:44px;
padding:8px 12px;
border:1px solid rgba(255,255,255,.25);
border-radius:6px;
background:#06172a;
color:#fff;
font:inherit}
.eclipse-tiles{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
gap:10px;
padding:0;
list-style:none}
.about .eclipse-tile{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:4px;
height:100%;
padding:10px 12px;
border:1px solid rgba(255,255,255,.14);
border-radius:8px;
color:inherit;
text-decoration:none}
.about .eclipse-tile:hover{
border-color:#ffcf52}
.eclipse-tile b{
color:#87d7d2;
font-size:15px}
.eclipse-tile small{
color:#b8c7cc;
font:400 12px/1.4 var(--font-mono)}
@media (max-width:560px){
.eclipse-next{
grid-template-columns:1fr}
.eclipse-next h2{
font-size:24px}
.eclipse-cards{
grid-template-columns:1fr}
.about .eclipse-card{
flex-direction:row}
.eclipse-card picture,.eclipse-card__blank{
flex:none;
width:96px}
.eclipse-card img,.eclipse-card__blank{
height:100%;
aspect-ratio:1}
.eclipse-line{
grid-template-columns:auto 1fr;
gap:4px 10px}
.eclipse-line .eclipse-card__where,.eclipse-line .eclipse-bar{
grid-column:1/-1}
.eclipse-line .eclipse-card__where{
white-space:normal}
.eclipse-tiles{
grid-template-columns:1fr 1fr}
}
/* A country page: a timeline of every path through the country, the next eclipse up front and a
   card per later one (src/eclipse-page-text.js). */
.eclipse-timeline{
margin:24px 0 8px;
padding:22px 18px 10px;
border:1px solid rgba(255,255,255,.12);
border-radius:10px;
background:#06172a}
.eclipse-timeline__head{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
gap:6px 16px;
margin:0 0 28px;
color:#8fa3aa;
font:500 12px/1.4 var(--font-mono)}
.eclipse-timeline__legend{
display:flex;
gap:14px}
.eclipse-timeline__legend span{
display:inline-flex;
align-items:center;
gap:6px}
.eclipse-timeline__legend .eclipse-dot{
position:static;
width:10px;
height:10px;
margin:0}
.eclipse-track{
position:relative;
height:44px;
margin:0 8px;
touch-action:pan-y;
cursor:zoom-in}
.eclipse-track.is-zoomed{
cursor:default}
.eclipse-track::before{
content:"";
position:absolute;
left:0;
right:0;
top:14px;
height:2px;
background:rgba(255,255,255,.14)}
.eclipse-track__past{
position:absolute;
left:0;
top:14px;
height:2px;
background:rgba(255,255,255,.32);
transition:width .18s ease-out}
.eclipse-track>[data-at]{
transition:left .18s ease-out,opacity .12s}
.eclipse-track__now{
position:absolute;
top:4px;
width:2px;
height:22px;
margin-left:-1px;
background:#8fa3aa}
.eclipse-track__now span{
position:absolute;
top:-15px;
left:50%;
transform:translateX(-50%);
color:#8fa3aa;
font:500 10px/1 var(--font-mono);
white-space:nowrap}
.eclipse-dot{
position:absolute;
top:15px;
width:14px;
height:14px;
margin:-7px 0 0 -7px;
border:2px solid #ffcf52;
border-radius:50%;
background:#03101d}
.eclipse-dot--total{
background:#ffcf52}
.eclipse-dot--hybrid{
background:linear-gradient(90deg,#ffcf52 50%,#03101d 50%)}
.eclipse-dot--past{
opacity:.4}
.eclipse-dot--next{
width:20px;
height:20px;
margin:-10px 0 0 -10px;
box-shadow:0 0 0 4px rgba(255,207,82,.25)}
a.eclipse-dot:hover,a.eclipse-dot:focus-visible{
outline:none;
box-shadow:0 0 0 4px rgba(255,207,82,.45)}
.eclipse-tick{
position:absolute;
top:30px;
transform:translateX(-50%);
color:#8fa3aa;
font:400 11px/1 var(--font-mono)}
.eclipse-dot-label{
position:absolute;
top:-16px;
transform:translateX(-50%);
padding:1px 3px;
border-radius:3px;
background:#03101d;
color:#ffcf52;
font:500 10px/1.2 var(--font-mono);
white-space:nowrap;
pointer-events:none;
opacity:0}
.eclipse-dot-label.is-shown{
opacity:1}
.eclipse-dot-label--below{
top:28px}
.eclipse-track.is-zoomed .eclipse-tick,.eclipse-track.is-zoomed .eclipse-track__now span{
opacity:0}
/* The next eclipse: still and facts side by side, the best places and neighbours across below. */
.eclipse-next--country{
grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
grid-template-areas:"still body" "more more";
scroll-margin-top:16px}
.eclipse-next--plain{
grid-template-areas:"body body" "more more"}
.eclipse-next--country .eclipse-next__still{
grid-area:still}
.eclipse-next--country .eclipse-next__body{
grid-area:body}
.eclipse-next--country .eclipse-next__count{
font-size:16px}
.eclipse-next__more{
grid-area:more;
display:grid;
grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
gap:8px 28px;
padding:18px 22px 20px;
border-top:1px solid rgba(255,255,255,.1)}
.eclipse-next__more>div{
display:flex;
flex-direction:column;
gap:10px}
.eclipse-next__more>div>*{
margin:0}
.eclipse-next__seeker{
font-size:14px}
.eclipse-stats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
gap:10px}
.eclipse-stats div{
padding:8px 10px;
border-radius:6px;
background:rgba(255,255,255,.04)}
.eclipse-stats dt{
color:#8fa3aa;
font-size:11px;
letter-spacing:.08em;
text-transform:uppercase}
.eclipse-stats dd{
margin:4px 0 0;
color:#fff;
font:600 15px/1.25 var(--font-mono);
white-space:nowrap}
.eclipse-stats dd small{
display:block;
color:#8fa3aa;
font:400 11px/1.3 var(--font-mono)}
.eclipse-regions{
color:#b8c7cc;
font-size:14px;
line-height:1.5}
.eclipse-regions b,.eclipse-subhead{
color:#8fa3aa;
font:600 12px/1.4 var(--font-mono);
letter-spacing:.08em;
text-transform:uppercase}
.eclipse-regions b{
margin-inline-end:6px}
.eclipse-chips a{
text-decoration:none}
.eclipse-chips li:has(a:hover){
border-color:#ffcf52}
/* The best places with a bar for their duration against the longest of them. */
.eclipse-ranking{
margin:0;
padding:0;
list-style:none;
counter-reset:ranking}
.eclipse-ranking li{
display:grid;
grid-template-columns:22px minmax(0,1fr) 120px;
align-items:center;
gap:2px 10px;
padding:6px 0;
border-top:1px solid rgba(255,255,255,.08);
counter-increment:ranking}
.eclipse-ranking li::before{
content:counter(ranking);
color:#8fa3aa;
font:600 13px/1 var(--font-mono)}
.eclipse-ranking a{
font-weight:600}
.eclipse-ranking small{
grid-column:2;
color:#8fa3aa;
font:400 12px/1.3 var(--font-mono)}
.eclipse-ranking__bar{
grid-column:3;
grid-row:1/span 2;
display:flex;
flex-direction:column;
gap:4px;
color:#d7e2e5;
font:500 12px/1 var(--font-mono);
text-align:end}
.eclipse-ranking__bar span{
height:4px;
overflow:hidden;
border-radius:2px;
background:rgba(255,255,255,.1)}
.eclipse-ranking__bar i{
display:block;
height:100%;
background:#ffcf52}
/* A card per later eclipse, its detail behind a disclosure. */
.eclipse-cards--country{
grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.eclipse-country-card{
display:flex;
flex-direction:column;
overflow:hidden;
border:1px solid rgba(255,255,255,.14);
border-radius:8px;
background:#06172a;
scroll-margin-top:16px}
.eclipse-country-card:target{
border-color:#ffcf52}
.eclipse-country-card picture{
display:block}
.eclipse-country-card img,.eclipse-country-card .eclipse-card__blank{
display:block;
width:100%;
height:auto;
aspect-ratio:16/9;
object-fit:cover;
background:#0a2036}
.eclipse-country-card .eclipse-card__body{
gap:8px;
padding:12px 14px 14px}
.eclipse-country-card .eclipse-card__body>*{
margin:0}
.eclipse-country-card .eclipse-card__year{
display:flex;
justify-content:space-between;
gap:8px}
.eclipse-card__year span{
color:#8fa3aa;
font-weight:400;
letter-spacing:0}
.eclipse-country-card .eclipse-card__date{
margin:0;
color:#fff;
font-size:18px}
.eclipse-country-card .eclipse-kind{
margin:0}
.eclipse-country-card--past{
opacity:.7}
.eclipse-mini{
display:flex;
flex-wrap:wrap;
gap:4px 16px;
color:#d7e2e5;
font:500 13px/1.4 var(--font-mono)}
.eclipse-mini dt{
display:inline;
color:#8fa3aa;
font-weight:400}
.eclipse-mini dd{
display:inline;
margin:0 0 0 6px}
.eclipse-card__best{
color:#b8c7cc;
font-size:14px}
.eclipse-card__best a{
font-weight:600}
.eclipse-card__more{
border-top:1px solid rgba(255,255,255,.08)}
.eclipse-card__more>summary{
padding:10px 0 0;
color:#ffcf52;
font-size:14px;
cursor:pointer}
.eclipse-card__more[open]{
display:flex;
flex-direction:column;
gap:10px}
.eclipse-card__more>*{
margin:0}
.eclipse-card__more .eclipse-ranking li{
grid-template-columns:18px minmax(0,1fr) 90px}
.eclipse-card__links{
display:flex;
flex-wrap:wrap;
gap:6px 14px;
font-size:14px}
.eclipse-past{
margin-top:28px;
border:1px solid rgba(255,255,255,.12);
border-radius:8px}
.eclipse-past>summary{
padding:12px 14px;
color:#b8c7cc;
cursor:pointer}
.eclipse-past>summary small{
margin-inline-start:6px;
color:#8fa3aa;
font:400 13px/1 var(--font-mono)}
.eclipse-past .eclipse-cards{
margin:0;
padding:0 14px 14px}
/* Every eclipse with a path through the country, in columns. */
.eclipse-history{
margin:12px 0 0;
padding:0;
list-style:none;
columns:3 220px;
column-gap:24px}
.eclipse-history li{
display:flex;
align-items:center;
gap:8px;
padding:5px 0;
break-inside:avoid;
font-size:14px}
.eclipse-history .eclipse-kind{
margin:0;
font-size:11px}
.eclipse-history__past{
color:#8fa3aa}
.eclipse-history__past a{
color:#b8c7cc}
.eclipse-history__next a{
color:#ffcf52}
@media (max-width:760px){
.eclipse-next--country,.eclipse-next--plain{
grid-template-columns:1fr;
grid-template-areas:"still" "body" "more"}
.eclipse-next--country .eclipse-next__still img{
height:auto;
aspect-ratio:16/10}
.eclipse-next__more{
grid-template-columns:1fr}
.eclipse-stats{
grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
.eclipse-next--country .eclipse-next__body{
padding:16px}
.eclipse-ranking li{
grid-template-columns:20px minmax(0,1fr) 84px}
.eclipse-cards--country{
grid-template-columns:1fr}
.eclipse-country-card{
display:grid;
grid-template-columns:96px minmax(0,1fr)}
.eclipse-country-card picture{
height:100%}
.eclipse-country-card img,.eclipse-country-card .eclipse-card__blank{
width:96px;
height:100%;
min-height:120px;
aspect-ratio:auto}
.eclipse-country-card .eclipse-card__body{
padding:10px 12px 12px}
.eclipse-timeline{
padding:22px 12px 8px}
.eclipse-tick--minor{
visibility:hidden}
.eclipse-history{
columns:1}
}