/* The layout modes (desktop grid, compact and landscape), loaded after the base stylesheet.
   .high-contrast on <body> is always there: rules that start with it use it only for the
   specificity they need to win; do not add new ones. */
.help{
display:grid;
place-items:center;
line-height:1;
text-decoration:none}
.help::before,.help::after{
text-decoration:none}
#header-utilities,#header-map-style{
display:flex;
align-items:center;
gap:30px}
.mobile-menu-toggle,.mobile-menu,.mobile-panel-toggle{
display:none}
@media(min-width:1280px) and (min-height:520px){
.app-shell{
height:100vh;
min-height:0;
display:grid;
grid-template-rows:70px 94px minmax(0,1fr) 154px;
overflow:hidden}
.map-area{
height:auto;
min-height:0}
.lower-panel{
height:154px;
overflow:hidden}
}
@media(min-width:1280px) and (min-height:520px){
.app-shell{
grid-template-rows:70px 94px minmax(0,1fr)}
.lower-panel{
display:none}
}
.eclipse-disc--total i{
display:block;
background:#07192b;
box-shadow:0 0 4px 2px #d99500,0 0 12px 5px #e8ae00,0 0 22px 8px #bd8300aa}
.guide-legend{
margin-top:12px;
padding-top:9px;
border-top:1px solid #315563;
border-color:#315563;
color:#fff;
font:10px var(--font-mono)}
.guide-legend p{
margin:6px 0}
.guide-legend i{
display:inline-block;
width:17px;
height:8px;
margin-right:7px;
vertical-align:middle}
.watch-guide{
top:18px}
.total-swatch{
background:transparent!important;
border:2px solid #ffb000;
border-radius:50%}
.annular-swatch{
background:transparent!important;
border:2px solid #67e8f9;
border-radius:50%}
.coverage-swatch{
border-top:2px solid #e5b8ff}
.path-swatch{
border-top:2px dashed #22d3ee}
.terminator-swatch{
border-top:1px dashed rgba(255,255,255,.5)}
@media not all and (min-width:1280px) and (min-height:520px){
.topbar{
height:52px;
gap:12px}
#header-utilities,#header-map-style{
display:none}
.mobile-menu-toggle{
display:grid;
place-items:center;
margin-left:auto;
width:38px;
height:38px;
padding:0;
border:1px solid var(--line);
border-radius:3px;
background:#12334c;
color:#fff;
font:700 22px/1 Arial}
.mobile-menu{
display:block;
position:absolute;
z-index:20;
top:54px;
right:12px;
width:min(320px,calc(100vw - 24px));
padding:14px;
overflow:hidden;
border:1px solid var(--line);
box-shadow:0 14px 32px #00101c99}
.mobile-menu[hidden]{
display:none}
.mobile-menu #mobile-menu-content{
display:grid;
gap:14px;
min-width:0}
.mobile-menu #header-utilities{
display:grid;
gap:12px}
.mobile-menu .language-switch{
justify-content:space-between}
.mobile-menu .help{
justify-self:start}
.mobile-menu #event-control{
width:100%;
min-width:0}
.mobile-menu .event-select{
gap:6px;
min-width:0}
.mobile-menu .event-select select{
display:block;
width:100%;
min-width:0;
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
padding:5px 0}
.mobile-menu .time-zone-toggle{
justify-self:start}
.high-contrast .mobile-menu{
background:#000;
border-color:#fff}
.mobile-panel-toggle{
display:block;
position:absolute;
z-index:4;
bottom:18px;
padding:8px 10px;
border:1px solid var(--line);
background:#12334c;
color:#fff;
font:10px var(--font-mono);
letter-spacing:.6px}
.mobile-guide-toggle{
left:0;
border-left:0;
border-radius:0 3px 3px 0}
.mobile-point-toggle{
right:0;
border-right:0;
border-radius:3px 0 0 3px}
.watch-guide,.point-card{
z-index:8;
top:auto;
bottom:0;
max-height:calc(100% - 12px);
overflow:auto;
transition:transform .24s ease}
.watch-guide,.point-card{
left:0;
right:auto;
transform:translateX(calc(-100% - 2px))}
.mobile-guide-open .watch-guide,.mobile-point-open .point-card{
transform:translateX(0)}
.mobile-guide-open .mobile-guide-toggle,.mobile-point-open .mobile-point-toggle{
display:none}
}
@media not all and (min-width:1280px) and (min-height:520px){
.mobile-panel-toggle{
z-index:9}
.mobile-panels-closing .mobile-panel-toggle{
display:none}
}
@media not all and (min-width:1280px) and (min-height:520px){
.mobile-panel-toggle{
top:50%;
bottom:auto;
width:32px;
padding:9px 6px;
border:1px solid var(--line);
background:#12334c;
color:#b9d7db;
border-radius:3px;
font:600 10px var(--font-mono);
writing-mode:vertical-rl;
transform:translateY(-50%) rotate(180deg);
letter-spacing:.8px}
.mobile-guide-toggle{
top:35%;
left:8px;
border:1px solid var(--line);
border-radius:3px}
.mobile-point-toggle{
top:50%;
right:8px;
border:1px solid var(--line);
border-radius:3px}
.mobile-guide-open .mobile-panel-toggle,.mobile-point-open .mobile-panel-toggle{
display:none}
}
@media not all and (min-width:1280px) and (min-height:520px){
.topbar{
position:relative;
z-index:51}
.mobile-menu-toggle{
position:relative;
z-index:52}
.mobile-menu{
position:fixed;
inset:0;
width:100vw;
height:100vh;
padding:82px 24px 28px;
border:0;
box-shadow:none}
.mobile-menu #mobile-menu-content{
gap:26px}
.mobile-menu #header-utilities{
gap:20px}
.mobile-menu .event-select{
gap:10px}
}
@media not all and (min-width:1280px) and (min-height:520px){
.controlbar{
gap:7px}
.city-search{
flex:0 1 62px;
min-width:0;
display:block}
.city-search>span,.speed-counter>span{
display:none}
.city-search input{
width:100%;
min-width:0;
padding:7px 5px}
.speed-counter{
flex:0 1 102px;
min-width:0}
.speed-counter #shadow-speed{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:11px}
.play-controls{
flex:0 0 88px;
gap:4px}
.play{
padding:10px 8px}
}
@media not all and (min-width:1280px) and (min-height:520px){
body{
touch-action:manipulation}
#globe{
touch-action:none}
}
.location-lock{
position:relative;
background:#12334c!important;
color:#fff!important;
border-color:var(--line)!important;
font:16px/1 Arial,sans-serif!important}
.location-lock::before,.location-lock::after{
content:"";
position:absolute;
left:50%;
box-sizing:border-box;
border:1.5px solid currentColor}
.location-lock::before{
top:14px;
width:12px;
height:9px;
border-radius:1px;
transform:translateX(-50%)}
.location-lock::after{
top:7px;
width:8px;
height:8px;
border-bottom:0;
border-radius:6px 6px 0 0;
transform:translateX(-50%)}
.location-lock[aria-pressed="false"]::after{
left:56%;
transform:translateX(-50%) rotate(26deg);
transform-origin:0 100%}
.location-lock[aria-pressed="true"]{
border-color:#ffcf52!important;
box-shadow:inset 0 0 0 1px #ffcf52,0 0 8px #ffcf5277}
.track[aria-pressed="true"]{
border-color:#efbe3d!important;
color:#ffda63!important;
box-shadow:inset 0 0 0 1px #efbe3d,0 0 8px #ffcf5277}
.zoom-controls button.zoom-feedback,.play-step.zoom-feedback{
animation:zoom-feedback .45s ease-out}
@keyframes zoom-feedback{
50%{
background:#2d6688;
color:#ffda63;
border-color:#ffcf52;
outline:2px solid #ffcf52;
outline-offset:2px;
box-shadow:0 0 0 3px #ffcf5266}
}
.city-search input:disabled{
opacity:1;
-webkit-text-fill-color:#fff;
color:#fff;
cursor:not-allowed}
.city-search input:focus-visible{
outline:0;
border-color:#ffcf52;
box-shadow:0 0 0 1px #ffcf5266}
.help,.track,.time-zone-toggle,.mobile-menu-toggle,.mobile-panel-toggle,.location-lock{
background:#12334c!important;
color:#fff!important;
border:1px solid var(--line)!important;
border-radius:3px!important}
.help{
border-radius:50%!important}
.play{
background:rgba(255,207,82,.1)!important;
color:#ffda63!important;
border-color:#efbe3d!important}
.track,.location-lock{
font-weight:400!important}
.location-lock[aria-pressed="true"]{
color:#ffda63!important}
@media not all and (min-width:1280px) and (min-height:520px){
.location-lock{
color:#fff!important}
.location-lock[aria-pressed="true"]{
color:#ffda63!important}
.mobile-panel-toggle{
font-weight:400!important}
}
@media not all and (min-width:1280px) and (min-height:520px){
.mobile-menu #mobile-menu-content{
display:grid;
align-content:start;
gap:26px}
.mobile-menu-section{
display:grid;
gap:11px}
.mobile-menu-section h2{
margin:0;
color:#ffda63;
font:600 10px var(--font-mono);
letter-spacing:1.1px}
.mobile-menu-section .event-select>span{
display:none}
.mobile-menu-section .event-select,.mobile-menu-item,#mobile-menu-utilities{
display:grid;
gap:9px;
min-width:0}
.mobile-menu-section .event-select select{
min-height:38px;
padding:8px;
background:#12334c;
border:1px solid var(--line);
border-radius:3px}
.mobile-menu-item{
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
padding:10px 0;
border-top:1px solid var(--line);
color:#b9d7db;
font:10px var(--font-mono);
letter-spacing:.8px}
.mobile-menu-item .time-zone-toggle{
min-width:76px}
.mobile-menu #header-utilities{
display:grid;
gap:9px}
.mobile-menu .language-switch{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
min-height:38px;
padding:8px 10px;
background:#12334c!important;
border:1px solid var(--line)!important;
border-radius:3px!important;
color:#fff}
.mobile-menu .language-switch select{
min-width:58px}
.mobile-menu .help{
justify-self:start;
width:38px;
height:38px;
border-radius:3px!important}
}
@media not all and (min-width:1280px) and (min-height:520px){
.watch-guide,.point-card{
position:fixed}
}
.point-card{
flex-wrap:wrap;
max-width:min(430px,calc(100% - 36px));
border:1px solid #fff!important}
.point-card .graph-pager{
flex-basis:100%;
min-width:0}
.point-card [data-graph="point"] .timeline-header{
margin-top:8px;
padding-top:8px;
border-top:1px solid #c6d5d9}
.high-contrast .point-card [data-graph="point"] .timeline-header{
border-top-color:var(--line)}
.point-card [data-graph="point"] .graph-canvas-slot{
margin-top:4px;
padding-top:0;
border-top:0}
.high-contrast .point-card .graph-canvas-slot{
border-top-color:var(--line)}
.point-card .point-card__eclipse{
margin-bottom:6px}
.high-contrast .graph-bar{
border-bottom-color:var(--line)}
.point-card .graph-fact__when{
color:#cfe6e9}
.point-card .graph-facts li b{
color:#fff}
.point-card .graph-facts li span{
color:#cfe6e9}
.point-card .graph-jump{
color:#87d7d2}
.point-card__reading b{
color:#ffda63}
.high-contrast .point-card span{
color:#b9d7db}
.point-card small{
color:#cfe6e9}
.high-contrast .point-card__details .point-card__sun{
color:#cfe6e9}
.point-card .graph-canvas-slot{
min-height:64px}
.point-card .graph-note{
color:#b9d7db}
.point-card .timeline-header{
font-size:8px}
.point-card .timeline-times{
font-size:8px}
@media not all and (min-width:1280px) and (min-height:520px){
.lower-panel{
display:none}
.point-card{
max-width:calc(100% - 36px)}
}
.point-card__eclipse{
flex-basis:100%;
margin-bottom:3px;
color:#fff;
font:600 10px var(--font-mono);
letter-spacing:.4px}
@media not all and (min-width:1280px) and (min-height:520px){
.time-control{
order:3;
column-gap:18px;
row-gap:0}
.time-control .speed-counter{
grid-column:2;
min-width:0;
margin-top:-3px;
gap:6px}
.time-control .speed-counter>span{
display:inline}
.time-control .speed-counter #shadow-speed{
font-size:11px;
overflow:hidden;
text-overflow:ellipsis}
}
@media not all and (min-width:1280px) and (min-height:520px){
.mobile-panel-toggle{
top:auto;
bottom:8px;
left:8px;
right:auto;
transform:rotate(180deg)}
.mobile-guide-toggle{
top:auto;
bottom:132px;
left:8px}
.mobile-point-toggle{
top:auto;
bottom:8px;
left:8px;
right:auto}
}
@media(min-width:1280px) and (min-height:520px){
.time-control{
min-width:0;
grid-template-rows:auto auto;
column-gap:18px;
row-gap:0}
.time-control input{
align-self:end;
transform:translateY(-3px)}
.time-control .speed-counter{
grid-column:2;
min-width:0;
margin-top:-3px}
.time-control .speed-counter strong{
white-space:nowrap}
}
.time-control>div:first-child{
grid-row:1 / span 2;
align-self:center}
@media(min-width:1280px) and (min-height:520px){
.time-control .speed-counter{
justify-self:stretch;
justify-content:center;
margin-top:2px}
}
@media not all and (min-width:1280px) and (min-height:520px){
.time-control .speed-counter{
justify-self:stretch;
justify-content:flex-start;
margin-top:2px}
}
@media(min-width:1280px) and (min-height:520px){
.controlbar{
gap:clamp(14px,1.6vw,22px)}
.event-select select{
max-width:200px}
.city-search input{
width:145px}
.time-control{
min-width:200px;
grid-template-columns:100px minmax(0,1fr)}
}
@media(min-width:1280px) and (min-height:520px){
.event-select,.city-search,.time-zone-toggle,.play-controls{
align-self:center}
.play-controls{
margin-left:auto}
.event-select select{
height:36px;
padding:7px 9px;
border:1px solid var(--line);
border-radius:3px;
background:#12334c}
.city-search input{
height:36px}
.time-zone-toggle{
height:36px;
transform:translateY(9px)}
.play-controls{
align-items:end;
gap:16px}
.play{
width:226px;
height:36px}
}
@media not all and (min-width:1280px) and (min-height:520px){
.mobile-menu-section .event-select select{
border:1px solid var(--line)!important;
box-shadow:none}
.mobile-menu .language-switch{
border-color:var(--line)!important}
}
.event-select select,.language-switch select{
border:1px solid var(--line);
outline:0;
box-shadow:none}
.event-select select:focus,.event-select select:focus-visible,.language-switch select:focus,.language-switch select:focus-visible{
border-color:#efbe3d!important;
box-shadow:none}
.mobile-menu .language-switch:focus-within{
border-color:#efbe3d!important;
box-shadow:none}
@media not all and (min-width:1280px) and (min-height:520px){
.app-shell{
height:100dvh;
min-height:100dvh;
display:flex;
flex-direction:column;
overflow:hidden}
.map-area{
height:auto;
min-height:0;
flex:1 1 auto}
.mobile-panel-tabs{
position:fixed;
z-index:9;
left:0;
bottom:0;
display:flex;
width:100%;
gap:0;
border-top:1px solid var(--line);
background:#07192b}
.mobile-panel-tabs .mobile-panel-toggle{
position:static!important;
display:block!important;
flex:1;
width:50%!important;
min-height:38px;
padding:8px 10px!important;
border:0!important;
border-radius:0!important;
background:#12334c!important;
writing-mode:horizontal-tb!important;
transform:none!important;
font:400 10px var(--font-mono)!important;
letter-spacing:.6px!important}
.mobile-panel-tabs .mobile-point-toggle{
border-left:1px solid var(--line)!important}
.mobile-panel-toggle[aria-pressed="true"]{
color:#ffda63!important;
border-color:#efbe3d!important;
box-shadow:inset 0 0 0 1px #efbe3d}
.watch-guide,.point-card{
left:8px;
right:8px;
width:auto;
bottom:50px;
max-width:none;
z-index:12;
transform:translateY(calc(100% + 58px))}
.mobile-guide-open .watch-guide,.mobile-point-open .point-card{
transform:translateY(0)}
.mobile-guide-open .mobile-panel-toggle,.mobile-point-open .mobile-panel-toggle,.mobile-panels-closing .mobile-panel-toggle{
display:block!important}
}
.point-card__reading{
display:flex;
align-items:center;
gap:10px;
margin:3px 0 4px}
.point-card__reading b{
margin:0}
.point-card__countdowns{
display:grid;
gap:2px;
color:#fff;
font:11px var(--font-text);
line-height:1.25}
.point-card__countdowns span{
display:block;
font-weight:400}
@media not all and (min-width:1280px) and (min-height:520px){
.time-control{
position:relative;
z-index:1}
}
.settings-toggle{
display:grid;
place-items:center;
width:38px;
height:38px;
padding:0;
border:1px solid var(--line);
border-radius:3px;
background:#12334c;
color:#fff;
font:700 21px/1 Arial;
cursor:pointer}
.settings-toggle[aria-expanded="true"],.mobile-menu-toggle[aria-expanded="true"]{
color:#ffda63!important;
border-color:#efbe3d!important;
box-shadow:inset 0 0 0 1px #efbe3d,0 0 8px #ffcf5277}
.settings-panel{
position:absolute;
z-index:60;
top:54px;
right:56px;
width:300px;
padding:14px;
border:1px solid var(--line);
box-shadow:0 14px 32px #00101c99}
.settings-panel[hidden]{
display:none}
.settings-section{
display:grid;
gap:11px}
.settings-section h2{
margin:0;
color:#ffda63;
font:600 10px var(--font-mono);
letter-spacing:1.1px}
.settings-item{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:9px;
min-height:38px;
padding:8px 10px;
background:#12334c;
border:1px solid var(--line);
border-radius:3px;
color:#fff;
font:10px var(--font-mono);
letter-spacing:.8px}
.settings-item .time-zone-toggle{
min-width:76px;
height:36px;
transform:none}
.settings-check{
cursor:pointer}
.settings-check input{
width:18px;
height:18px;
margin:0;
accent-color:#efbe3d;
cursor:pointer}
#header-utilities,#header-map-style{
display:grid;
gap:9px}
.settings-panel .language-switch{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
min-height:38px;
padding:8px 10px;
background:#12334c!important;
border:1px solid var(--line)!important;
border-radius:3px!important;
color:#fff}
.settings-panel .language-switch select{
min-width:58px}
.settings-panel .map-style-toggle{
box-sizing:border-box;
min-width:76px;
height:28px;
padding:0 10px;
line-height:26px;
transform:none}
.mobile-about-link{
display:block;
padding:12px;
border:1px solid var(--line);
border-radius:3px;
background:#12334c;
color:#fff;
text-decoration:none;
font:600 12px var(--font-text)}
.mobile-about-link:focus-visible{
outline:2px solid #ffcf52;
outline-offset:2px}
.high-contrast .settings-panel{
background:#000;
border-color:#fff}
/* One site-wide menu; the compact rules below turn it into a full-screen menu on small screens. */
.mobile-menu-toggle{
display:grid;
place-items:center;
width:38px;
height:38px;
padding:0;
border:1px solid var(--line);
border-radius:3px;
background:#12334c;
color:#fff;
font:700 22px/1 Arial;
cursor:pointer}
.mobile-menu{
display:block;
position:absolute;
z-index:60;
top:54px;
right:12px;
width:min(320px,calc(100vw - 24px));
padding:14px;
overflow:hidden;
background:#0b263d;
border:1px solid var(--line);
box-shadow:0 14px 32px #00101c99}
.mobile-menu[hidden]{
display:none}
.mobile-menu #mobile-menu-content{
display:grid;
gap:14px;
min-width:0}
.topbar>.help{
display:none}
.about-topbar .mobile-menu-toggle{
margin-left:0}
.mobile-menu .mobile-about-link[aria-current="page"]{
color:#ffda63;
border-color:#efbe3d}
.app-install-setting{
display:grid;
gap:7px}
.app-install-setting[hidden]{
display:none}
.app-install-setting button{
min-height:38px;
padding:8px 10px;
border:1px solid #efbe3d;
border-radius:3px;
background:#12334c;
color:#ffda63;
font:500 10px var(--font-mono);
letter-spacing:.8px;
cursor:pointer}
.app-install-setting button:focus-visible{
outline:2px solid #fff;
outline-offset:2px}
.app-install-setting p{
display:none;
margin:0;
padding:8px 10px;
border-left:2px solid #efbe3d;
background:#12334c;
color:#fff;
font:11px/1.45 var(--font-text)}
.app-install-setting--help p{
display:block}
@media not all and (min-width:1280px) and (min-height:520px){
.topbar{
gap:8px}
.settings-toggle{
position:relative;
z-index:52;
width:38px;
height:38px;
margin-left:0}
.mobile-menu-toggle{
width:38px;
height:38px}
.selection-toggle{
margin-left:auto}
.brand{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap}
.selection-toggle,.settings-toggle,.mobile-menu-toggle{
flex:0 0 auto}
.mobile-menu-toggle{
margin-left:0!important}
.topbar>.help{
display:none}
.settings-panel{
position:fixed;
z-index:51;
inset:0;
width:auto;
height:auto;
padding:82px 24px calc(28px + env(safe-area-inset-bottom));
border:0;
box-shadow:none}
.settings-panel .settings-section{
max-width:420px;
margin:0 auto;
gap:20px}
.settings-panel .settings-section h2{
font-size:11px}
.settings-item{
padding:8px 10px}
.mobile-menu{
position:absolute;
inset:auto;
top:calc(100% + 2px);
right:12px;
width:min(320px,calc(100vw - 24px));
height:auto;
padding:14px;
border:1px solid var(--line);
box-shadow:0 14px 32px #00101c99}
.mobile-menu #mobile-menu-content{
display:grid;
align-content:start;
gap:14px;
max-width:none;
margin:0}
.mobile-menu .mobile-about-link{
min-height:0;
padding:12px}
.mobile-menu .mobile-menu-section{
display:none}
}
@media (orientation:landscape) and (not ((min-width:1280px) and (min-height:520px))){
html,body,.app-shell{
margin:0!important;
padding:0!important;
inset:0!important}
.app-shell{
position:relative;
top:0}
.topbar{
margin:0!important;
top:0}
.watch-guide{
left:8px!important;
right:auto!important;
width:min(430px,calc(100dvh - 16px),calc(100vw - 16px))!important;
max-width:none!important}
.point-card{
top:auto!important;
bottom:50px!important;
left:auto!important;
right:8px!important;
width:min(430px,calc(100% - 32px));
max-width:none!important;
max-height:min(260px,calc(100dvh - 50px))!important;
overflow-y:auto!important;
overscroll-behavior:contain;
touch-action:pan-y;
transform:translateY(calc(100% + 58px))!important}
.mobile-point-open .point-card{
z-index:61!important;
transform:translateY(0)!important}
}
/* The selection panel behind the cross fills the whole screen on a phone, like the settings,
   so nothing in it is clipped. */
@media not all and (min-width:1280px) and (min-height:520px){
.selection-toggle{
position:relative;
z-index:52;
display:grid;
place-items:center;
width:38px;
height:38px;
padding:0;
border:1px solid var(--line);
border-radius:3px;
background:#12334c;
color:#fff;
font-size:0;
cursor:pointer}
.selection-toggle[aria-expanded="true"]{
border-color:#efbe3d;
color:#ffda63;
box-shadow:inset 0 0 0 1px #efbe3d,0 0 8px #ffcf5277}
.selection-panel{
display:block;
position:fixed;
z-index:51;
inset:0;
padding:82px 24px calc(28px + env(safe-area-inset-bottom));
background:#000;
border:0;
overflow-y:auto;
overscroll-behavior:contain}
.selection-panel[hidden]{
display:none}
.selection-panel .settings-section{
display:grid;
gap:20px;
max-width:420px;
margin:0 auto}
.selection-panel .settings-section h2{
margin:0}
.selection-done{
min-height:42px;
border:1px solid #ffda63;
border-radius:3px;
background:#000;
color:#ffda63;
padding:0 12px;
font:600 11px var(--font-mono);
letter-spacing:1px;
cursor:pointer}
#selection-content{
display:grid;
gap:18px;
min-width:0}
#selection-content .event-select,#selection-content .city-search{
display:grid;
gap:7px;
min-width:0;
width:100%;
max-width:none}
#selection-content .event-select>span,#selection-content .city-search>span{
display:block}
#selection-content input{
width:100%;
max-width:none;
height:42px;
font:13px var(--font-text)}
#selection-content .city-results,#selection-content .eclipse-results{
position:static;
width:100%;
max-width:none;
max-height:min(46vh,340px);
margin-top:0;
box-shadow:none}
}
@media not all and (min-width:1280px) and (min-height:520px){
.controlbar{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:14px;
padding:12px 16px}
.controlbar .time-control{
order:2;
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:4px 14px;
max-width:none}
.controlbar .speed-counter{
order:2;
justify-content:flex-start;
min-width:0}
.controlbar .play-controls{
order:1;
display:grid;
grid-template-columns:40px minmax(0,1fr) 40px;
gap:6px;
align-items:center}
.controlbar .play-controls .play{
width:100%;
min-height:42px;
padding:1px 0 0;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
white-space:nowrap;
font:600 11px var(--font-mono);
letter-spacing:1px}
.controlbar .play-step{
width:40px;
height:42px;
padding:1px 0 0;
font-size:15px}
.controlbar>#event-control,.controlbar>.city-search{
display:none}
}
@media (orientation:landscape) and (not ((min-width:1280px) and (min-height:520px))){
.controlbar{
display:flex;
flex-wrap:nowrap;
align-items:center;
gap:8px;
padding:6px 12px}
.controlbar .time-control{
order:1;
flex:1 1 58%;
min-width:0;
display:grid;
grid-template-columns:auto minmax(140px,1fr);
align-items:center;
gap:10px}
.controlbar .time-control>div:first-child{
display:flex;
align-items:baseline;
gap:6px;
white-space:nowrap}
.controlbar .speed-counter{
flex:0 1 auto;
min-width:0;
gap:6px;
overflow:hidden}
.controlbar .play-controls{
order:2;
flex:0 0 auto;
display:grid;
grid-template-columns:34px auto 34px;
gap:6px;
margin-left:auto}
.controlbar .play-step{
width:34px;
height:34px;
padding:2px 0 0;
font-size:13px}
.controlbar .play-controls .play{
width:216px;
min-height:34px;
padding:9px 10px 8px;
overflow:hidden;
text-overflow:ellipsis}
}
.watch-guide{
overflow-y:auto;
overscroll-behavior:contain}
@media not all and (min-width:1280px) and (min-height:520px){
.watch-guide{
max-height:calc(100dvh - 78px);
-webkit-overflow-scrolling:touch}
}
.timeline-times>span{
display:grid;
justify-items:center;
gap:2px}
.timeline-times i{
font-style:normal;
font-size:.82em;
letter-spacing:.5px}
.timeline-times b{
font:inherit;
color:inherit}
.timeline-not-visible{
margin:18px 0;
color:#b9d7db;
font:12px var(--font-text);
text-align:center}
.timeline-not-visible[hidden]{
display:none}
/* A short window always gets the mobile layout: below 520 pixels of height the desktop query
   no longer matches. On a phone on its side the bars stand on one lower row here, or they
   leave the globe a strip of 91 pixels. */
@media(max-height:480px){
.topbar{
height:44px;
padding:0 12px;
gap:10px}
.brand{
font-size:15px}
.controlbar{
flex-wrap:nowrap;
padding:6px 12px;
gap:10px}
/* Without a basis of its own the time bar shrinks to 62 pixels here. */
.time-control{
order:1;
flex:1 1 420px;
max-width:none;
grid-template-columns:74px 1fr;
column-gap:10px;
row-gap:0}
.mobile-panel-toggle{
bottom:8px}
.settings-panel{
padding:52px 18px calc(12px + env(safe-area-inset-bottom))}
.settings-section{
gap:12px}
}
/* Support: a gold button beside the settings on desktop, a gold menu item, a quiet line in the
   viewing guide on a phone. The heart is a filled shape, not U+2665: a phone draws that as a
   red emoji whatever colour the stylesheet asks for. */
.support-button{
display:none}
@media(min-width:1280px) and (min-height:520px){
.support-button{
display:inline-flex;
align-items:center;
gap:7px;
flex:0 0 auto;
height:38px;
padding:0 14px;
border:1px solid #efbe3d;
border-radius:3px;
background:rgba(255,207,82,.1);
color:#ffda63;
font:600 11px var(--font-mono);
letter-spacing:1px;
text-transform:uppercase;
text-decoration:none;
white-space:nowrap}
.support-button:hover,.support-button:focus-visible,.support-button[aria-current]{
background:rgba(255,207,82,.22)}
.support-button:focus-visible{
outline:2px solid #ffcf52;
outline-offset:2px}
.guide-support{
display:none}
}
.support-button::before,.support-link::before,.guide-support a::before{
content:"";
display:inline-block;
width:.85em;
height:.78em;
margin-right:7px;
vertical-align:-.05em;
background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.6 10.3 20C4.2 14.5 0 10.7 0 6.1 0 2.3 3 0 6.6 0c2 0 4 .9 5.4 2.4C13.4.9 15.4 0 17.4 0 21 0 24 2.3 24 6.1c0 4.6-4.2 8.4-10.3 13.9z'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.6 10.3 20C4.2 14.5 0 10.7 0 6.1 0 2.3 3 0 6.6 0c2 0 4 .9 5.4 2.4C13.4.9 15.4 0 17.4 0 21 0 24 2.3 24 6.1c0 4.6-4.2 8.4-10.3 13.9z'/%3E%3C/svg%3E") center/contain no-repeat}
.support-button::before{
margin-right:0;
width:15px;
height:14px;
vertical-align:0}
.support-link::before{
background:#ffda63}
.guide-support{
margin:14px 0 0;
padding-top:10px;
border-top:1px solid var(--line);
color:#a7c1c6;
font-size:12px}
.guide-support a{
display:block;
width:fit-content;
margin-top:4px;
color:#ffda63}
.support-bar__link{
display:inline-block;
text-decoration:none}
body[class*="embed-"] .support-button,body[class*="embed-"] .guide-support,body[class*="embed-"] .support-bar{
display:none}
/* The i for time and playback stands behind the clock in every layout, after the date where
   they share a line; elsewhere it pushed buttons off the bar. Its catch area does not reach
   past the date, so the time column does not overflow. */
.time-control .manual-help{
order:1}
.time-control .manual-help::after{
inset-inline-end:0}
/* The copy button for code. Here and not in embed.css, because the manual does not load that. */
.embed-copy{
min-height:38px;
border:1px solid #efbe3d;
border-radius:3px;
background:rgba(255,207,82,.1);
color:#ffda63;
padding:8px 10px;
font:500 10px var(--font-mono);
letter-spacing:.8px;
text-transform:uppercase;
cursor:pointer}
.embed-copy:disabled{
opacity:.45;
cursor:default}
.embed-copy.zoom-feedback{
animation:zoom-feedback .45s ease-out}
/* The play button pulses on a first visit until the visitor plays or moves the timeline
   (endPlayHint() in app.js). Only the opacity of a layer of its own is animated, so the
   compositor does the work (a growing box-shadow kept the main thread busy). Inside the
   button, because in landscape it clips. */
.play.is-hinting{
position:relative}
.play.is-hinting::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
box-shadow:inset 0 0 0 2px var(--gold),inset 0 0 12px rgba(255,207,82,.55);
opacity:0;
pointer-events:none;
animation:play-hint 1.6s ease-out 6}
@keyframes play-hint{
0%{
opacity:1}
100%{
opacity:0}
}
@media(prefers-reduced-motion:reduce){
.play.is-hinting::after{
animation:none;
opacity:1}
}
/* The date under the clock as a button (#eclipse-chip) that chooses another eclipse: only on a
   phone upright, where the eclipse field sits behind the cross. The kind of eclipse is only
   for a screen reader. The bottom padding enlarges the hit area inside the bar's padding; the
   top stays small for the i button above. */
.eclipse-chip{
display:none}
@media (orientation:portrait) and (not ((min-width:1280px) and (min-height:520px))){
.controlbar .eclipse-chip{
display:block;
max-width:100%;
margin:3px 0 -8px;
padding:2px 0 8px;
overflow:hidden;
border:0;
background:none;
color:#b8c7cc;
font:9px var(--font-mono);
text-align:start;
text-decoration:underline dotted;
text-underline-offset:3px;
text-overflow:ellipsis;
white-space:nowrap;
cursor:pointer}
.controlbar .eclipse-chip__type,.controlbar .eclipse-chip__sep{
position:absolute;
width:1px;
height:1px;
margin:-1px;
overflow:hidden;
clip-path:inset(50%);
white-space:nowrap}
.controlbar .time-control #time-range{
display:none}
}
@media(hover:hover){
.eclipse-chip:hover{
color:var(--aqua)}
}