/* Concord Weather — sits on the navy tile in the header shortcut bar. */
.cri-wx { position: relative; font-family: Arial, Helvetica, sans-serif; color: #fff; width: 100%; }

.cri-wx__now {
  all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 10px;
  cursor: pointer; padding: 2px 0; color: inherit;
}
.cri-wx .cri-wx__now:hover, .cri-wx .cri-wx__now:focus, .cri-wx .cri-wx__now:active {
  background: none; color: inherit; box-shadow: none; border: 0; transform: none;
}
.cri-wx__now:focus-visible { outline: 2px solid #ffffff99; outline-offset: 3px; border-radius: 4px; }
.cri-wx__icon { width: 26px; height: 26px; flex: 0 0 26px; color: #FFD66B; }
.cri-wx__icon svg, .cri-wx__dicon svg { width: 100%; height: 100%; display: block; }
.cri-wx__temp { font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -.5px; }
.cri-wx__meta { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.cri-wx__city { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cri-wx__desc { font-size: 11px; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cri-wx__caret { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-width: 2; opacity: .7; transition: transform .2s; }
.cri-wx.is-open .cri-wx__caret { transform: rotate(180deg); }
.cri-wx:not(.is-ready) .cri-wx__caret { display: none; }
.cri-wx:not(.is-ready) .cri-wx__now { cursor: default; }

/* Forecast popover */
.cri-wx__pop {
  position: absolute; right: -10px; top: calc(100% + 12px); z-index: 9999; width: 260px;
  background: #fff; color: #102239; border: 1px solid #E1E8F0; border-radius: 10px;
  box-shadow: 0 12px 28px rgba(16, 34, 57, .16); padding: 12px 14px 10px;
}
.cri-wx__pop[hidden] { display: none; }
.cri-wx__pop-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid #EEF2F6; }
.cri-wx__pop-city { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cri-wx__pop-hl { font-size: 11px; color: #5B6B7E; white-space: pre; }
.cri-wx__days { list-style: none; margin: 4px 0 0; padding: 0; }
.cri-wx__days li { display: grid; grid-template-columns: 46px 20px 1fr auto; align-items: center; gap: 8px; padding: 6px 0; font-size: 12px; }
.cri-wx__days li + li { border-top: 1px solid #F3F6F9; }
.cri-wx__day { font-weight: 700; }
.cri-wx__dicon { width: 20px; height: 20px; color: #234B69; }
.cri-wx__dlabel { color: #5B6B7E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cri-wx__range { color: #5B6B7E; white-space: nowrap; }
.cri-wx__range b { color: #102239; }
.cri-wx__pop-foot { display: flex; justify-content: space-between; margin-top: 6px; padding-top: 7px; border-top: 1px solid #EEF2F6; font-size: 10px; color: #8795A5; }
.cri-wx__pop-foot a { color: inherit; text-decoration: none; }
.cri-wx__pop-foot a:hover { text-decoration: underline; }

@media (max-width: 767px) {
  .cri-wx__pop { right: -6px; width: min(260px, calc(100vw - 32px)); }
  .cri-wx__temp { font-size: 18px; }
  .cri-wx__icon { width: 22px; height: 22px; flex-basis: 22px; }
}
