.bookmark-dashboard[hidden],.bookmark-dashboard [hidden]{display:none!important}
.bookmark-dashboard{margin-bottom:32px}
.bookmark-dashboard.city-dashboard{margin-bottom:0}
.bookmark-dashboard{--bookmark-ink:#666;--bookmark-hover-ink:#222;--bookmark-hover-bg:#00000008;--bookmark-outline:#aaa}
[data-theme=dark] .bookmark-dashboard{--bookmark-ink:#bdbdbd;--bookmark-hover-ink:#eee;--bookmark-hover-bg:#ffffff12;--bookmark-outline:#777}
.bookmark-cards li.bookmark-card{padding-top:22px;container-type:inline-size}
.bookmark-card-title{padding-right:20px;margin-bottom:8px;font-size:0;line-height:1.4;overflow-wrap:anywhere}
.bookmark-card-title>a{display:inline;margin:0;padding:0}
.bookmark-name-tail{white-space:nowrap}
.bookmark-name-tail::after{content:'';display:inline-block;width:27px}
.bookmark-card-title>.city-bookmark{position:relative;z-index:2;display:inline-grid;vertical-align:-1px;flex:none;width:24px;height:24px;padding:4px;margin:0 0 0 -24px;border:0;border-radius:4px;background:transparent;color:var(--bookmark-ink)}
.bookmark-card-title>.city-bookmark svg{width:16px;height:16px}
.bookmark-card-title>.city-bookmark:hover{background:var(--bookmark-hover-bg);color:var(--bookmark-hover-ink)}
.bookmark-card-title>.city-bookmark:focus-visible{outline:2px solid var(--bookmark-hover-ink);outline-offset:2px}
.bookmark-dashboard .home-city-heading>.city-bookmark{color:var(--bookmark-ink);background:transparent;border-color:var(--bookmark-outline)}
.bookmark-dashboard .home-city-heading>.city-bookmark:hover{color:var(--bookmark-hover-ink);background:var(--bookmark-hover-bg);border-color:var(--bookmark-hover-ink)}
.bookmark-dashboard .home-city-heading>.city-bookmark:focus-visible{outline:2px solid var(--bookmark-hover-ink);outline-offset:2px}
.bookmark-card>.home-city-error,.bookmark-card>.home-city-loading{margin-top:14px;font-size:12px;line-height:1.5}
.place-readings{display:inline-flex;align-items:baseline;gap:12px;order:1;white-space:nowrap}
.place-readings .place-temperature{order:0}
.bookmark-sea{display:inline-flex;align-items:baseline;gap:6px;font-size:18px;line-height:1;margin:0;color:var(--water-blue)}
.bookmark-sea strong{font-weight:600;white-space:nowrap}
.place-reading-symbol{flex:none;width:16px;height:16px;transform:translateY(3px)}
.place-weather--readings{gap:6px}
.place-weather--readings>.weather-symbol--place,.place-weather--readings>.station-type-symbol{flex:0 1 60px;min-width:36px}
@container(max-width:180px){
  .place-readings{gap:8px}
  .place-readings .place-temperature{font-size:22px}
  .bookmark-sea{font-size:14px;gap:6px}
  .place-reading-symbol{width:12px;height:12px}
  .place-weather--readings{gap:4px}
  .place-weather--readings>.weather-symbol--place,.place-weather--readings>.station-type-symbol{flex-basis:40px;min-width:20px}
}
@container(max-width:124px){
  .place-readings{gap:4px}
  .place-readings .place-temperature{font-size:20px}
  .place-reading-symbol{width:10px;height:10px}
  .place-weather--readings{gap:2px}
  .place-weather--readings>.weather-symbol--place,.place-weather--readings>.station-type-symbol{flex-basis:28px;min-width:12px}
}
.page-world .places.bookmark-cards li:first-child{grid-column:auto;background:var(--panel)}
.page-world .bookmark-cards li:first-child .bookmark-card-title>a{font-size:18px}
.page-world .places.bookmark-cards li:first-child::before{width:26px;background:var(--accent)}
.bookmark-dialog{box-sizing:border-box;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:28px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);box-shadow:0 20px 70px #0005;overflow:auto}
.bookmark-dialog::backdrop{background:#101b2a99;backdrop-filter:blur(3px)}
.bookmark-dialog:not([open]){display:none}
.bookmark-dialog [hidden]{display:none!important}
.bookmark-dialog h2{font-size:23px;line-height:1.3;margin:0 0 14px}
.bookmark-dialog>p{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 20px}
.bookmark-replacements{border:0;padding:0;margin:0}
.bookmark-replacements legend{font-size:13px;font-weight:600;padding:0;margin:0 0 10px}
.bookmark-replacement{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;margin:0 0 7px;cursor:pointer;background:var(--subtle)}
.bookmark-replacement:has(input:checked){background:var(--subtle);border-color:var(--line);opacity:.65}
.bookmark-replacement input{flex:0 0 18px;width:18px;height:18px;margin:0;accent-color:var(--accent)}
.bookmark-replacement span{min-width:0;overflow-wrap:anywhere}
.bookmark-dialog .bookmark-candidate,.bookmark-replacement strong{font-size:14px;line-height:1.4;font-weight:700}
.bookmark-dialog .bookmark-candidate{color:var(--ink)}
.bookmark-replacement strong{display:block}
.bookmark-replacement small{display:block;font-size:11px;line-height:1.5;color:var(--muted);margin-top:2px}
.bookmark-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.bookmark-dialog-actions button{font:inherit;font-size:13px;line-height:1.4;padding:11px 14px;border-radius:6px;border:1px solid var(--line);cursor:pointer}
.bookmark-cancel{background:var(--subtle);color:var(--ink)}
.bookmark-confirm{background:var(--accent);color:var(--on-accent,#fff);border-color:var(--accent)!important;font-weight:600}
.bookmark-confirm:disabled{opacity:.45;cursor:default}
.bookmark-dialog-open{overflow:hidden}
@media(max-width:760px){.bookmark-dashboard{margin-bottom:26px}.bookmark-cards li.bookmark-card{padding-top:16px}.bookmark-card-title{padding-right:16px}.bookmark-card-title>.city-bookmark{vertical-align:-2px}.page-world .bookmark-cards li:first-child .bookmark-card-title>a{font-size:16px}.bookmark-dialog{padding:20px}.bookmark-dialog h2{font-size:20px}.bookmark-dialog-actions{flex-direction:column-reverse}.bookmark-dialog-actions button{width:100%}}

@media(min-width:761px){
  .bookmark-dialog{width:min(720px,calc(100vw - 32px))}
  .bookmark-replacements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .bookmark-replacements legend{grid-column:1/-1}
  .bookmark-replacement{min-width:0;margin:0}
}
.bookmark-dialog.bookmark-dialog--remove{width:min(560px,calc(100vw - 32px))}
