/* The card of a place, in the city seeker and on the place page (src/city-card.js). */
/* Icons are strokes in currentColor, so hover, gold and contrast need no rules of their own. */
.city-seeker__icon{
width:16px;
height:16px;
flex:none;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round}
.city-seeker__sr{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0 0 0 0);
white-space:nowrap}
.city-seeker__card{
display:grid;
gap:9px;
align-content:start;
min-width:0;
padding:12px 13px;
border:1px solid var(--line);
border-radius:3px;
background:var(--navy);
content-visibility:auto;
contain-intrinsic-size:auto 200px}
.city-seeker__card-head{
display:flex;
align-items:center;
gap:10px;
min-width:0}
.city-seeker__who{
flex:1;
min-width:0}
.city-seeker__name{
margin:0;
font:500 16px/1.25 var(--font-text);
overflow-wrap:anywhere}
.city-seeker__name a{
color:var(--aqua)}
.city-seeker__meta{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:2px 6px;
margin-top:2px;
color:#8eafb8;
font:12px var(--font-mono)}
.city-seeker__meta .city-seeker__value{
font-size:12px;
color:inherit}
/* The score in a ring: gold from 80, aqua from 60, quiet below that. */
.city-seeker__score{
display:flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
flex:none;
box-sizing:border-box;
border:3px solid #8eafb8;
border-radius:50%;
color:var(--text);
font:14px var(--font-mono)}
.city-seeker__score--high{
border-color:var(--gold);
color:#ffda63}
.city-seeker__score--mid{
border-color:var(--aqua)}
/* Two rows on the same columns, the third wider: the sun with its direction, and under it the terrain. */
.city-seeker__main{
display:grid;
grid-template-columns:minmax(0,.85fr) minmax(0,.7fr) minmax(0,1.45fr);
gap:6px}
.city-seeker__value{
display:inline-flex;
align-items:center;
gap:5px;
min-width:0;
color:var(--text);
font:14px var(--font-mono);
white-space:nowrap}
.city-seeker__value .city-seeker__icon{
color:var(--aqua)}
/* The climate row has no border, so it does not look like a pill that can be pressed. */
.city-seeker__climate{
display:grid;
grid-template-columns:minmax(0,.85fr) minmax(0,.7fr) minmax(0,1.45fr);
gap:6px}
.city-seeker__lines{
display:grid;
gap:4px;
padding-top:8px;
border-top:1px solid var(--line)}
.city-seeker__lines .city-seeker__value{
align-items:flex-start;
color:#b9d7db;
font-size:12px;
white-space:normal}
.city-seeker__lines .city-seeker__icon{
width:15px;
height:15px;
margin-top:1px}
.city-seeker__utc{
color:#8eafb8}
/* The value the list is sorted by lights up in every card, so the order explains itself. */
.city-seeker__value.is-sorted,.city-seeker__value.is-sorted .city-seeker__icon{
color:#ffda63}
.city-seeker__name.is-sorted a{
color:#ffda63}
.city-seeker__score.is-sorted{
box-shadow:0 0 0 2px #07192b,0 0 0 3px var(--gold)}
.city-seeker__value.low-sun::after{
content:' ⚠';
color:var(--gold);
font-size:12px}
/* The terrain under the sun reaches the sun: a red warning, as the line Horizon in the viewing guide. */
.city-seeker__value.terrain-above-sun::after{
content:' ⚠';
color:#ff8a7a;
font-size:12px}