/* GracePress top bar widgets: calendar ticker, weather bar, and their pop-up. Colors come from the surrounding bar. */

/* ---------- Shared: the button that fills a top bar slot ---------- */
.gp-tick__btn, .gp-wbar__btn {
  display: inline-flex; align-items: center; margin: 0; padding: 4px 10px; border: 0; border-radius: 10px;
  background: transparent; color: inherit; font: inherit; line-height: 1.2; cursor: pointer; max-width: 100%;
  -webkit-tap-highlight-color: transparent; transition: background-color .2s ease;
}
.gp-tick__btn:hover, .gp-wbar__btn:hover { background: rgba(127, 127, 127, .16); }
.gp-tick__btn:focus-visible, .gp-wbar__btn:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

/* ---------- Calendar ticker ---------- */
.gp-tick { display: inline-flex; align-items: center; min-width: 0; --dur: .5s; --tin: none; --tout: none; }

/* All frames share one grid cell, so the widget is as wide as its widest frame and never jumps. */
.gp-tick__stage { display: inline-grid; position: relative; overflow: hidden; padding: 4px 8px; perspective: 500px; }
.gp-tick__frame {
  grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-width: 0;
  font-size: 15px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums;
  opacity: 0; visibility: hidden; transform: var(--tin); transition: none;
}
.gp-tick__icon { display: inline-flex; flex: 0 0 auto; }
.gp-tick__icon svg { width: 1.15em; height: 1.15em; }
.gp-tick__text { min-width: 0; }

.gp-tick__frame.is-active, .gp-tick__frame.is-leaving { visibility: visible; transition: opacity var(--dur) ease, transform var(--dur) cubic-bezier(.2, .7, .2, 1); }
.gp-tick__frame.is-active { opacity: 1; transform: none; }
.gp-tick__frame.is-leaving { opacity: 0; transform: var(--tout); }

/* Entrance (--tin) and exit (--tout) for each transition; the script sets data-tr on the widget before every swap. */
.gp-tick[data-tr="fade"] { --tin: none; --tout: none; }
.gp-tick[data-tr="slide-up"] { --tin: translateY(75%); --tout: translateY(-75%); }
.gp-tick[data-tr="slide-left"] { --tin: translateX(45%); --tout: translateX(-45%); }
.gp-tick[data-tr="zoom"] { --tin: scale(.6); --tout: scale(1.35); }
.gp-tick[data-tr="flip"] { --tin: rotateX(-85deg); --tout: rotateX(85deg); }
.gp-tick[data-tr="none"] { --dur: 0s; }

/* ---------- Weather bar ---------- */
.gp-wbar { display: inline-flex; align-items: center; min-width: 0; }
.gp-wbar__btn { gap: 8px; }
.gp-wbar__icon { display: block; flex: 0 0 auto; width: 34px; height: 34px; }
.gp-wbar__text { display: flex; flex-direction: column; min-width: 0; text-align: left; line-height: 1.1; }
.gp-wbar__text[hidden], .gp-wbar__place[hidden] { display: none; }
.gp-wbar__temp { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gp-wbar__temp small { font-size: .62em; font-weight: 500; margin-left: 1px; }
.gp-wbar__place { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; opacity: .78; }
.gp-wbar.is-live .gp-wbar__text { animation: gp-wbar-in .6s ease both; }
@keyframes gp-wbar-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Pop-up ---------- */
html.gp-modal-open { overflow: hidden; }
.gp-modal {
  width: min(94vw, 560px); max-width: 94vw; max-height: 92vh; margin: auto; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible;
}
.gp-modal:not([open]) { display: none; }
.gp-modal::backdrop { background: rgba(28, 25, 20, .55); }
.gp-modal--fallback { position: fixed; inset: 0; z-index: 100000; height: fit-content; }
.gp-modal__panel {
  position: relative; box-sizing: border-box; max-height: 92vh; overflow: auto; padding: 16px 20px 22px;
  background: #fbfaf6; color: #26231e; border: 1px solid rgba(38, 35, 30, .12); border-radius: 16px; box-shadow: 0 24px 60px rgba(28, 25, 20, .35);
  animation: gp-modal-in .22s ease both;
}
@keyframes gp-modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.gp-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.gp-modal__title { margin: 0; font-size: 1.05rem; font-weight: 600; }
.gp-modal__close {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: rgba(38, 35, 30, .08); color: inherit; cursor: pointer;
}
.gp-modal__close:hover { background: rgba(38, 35, 30, .16); }
.gp-modal__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.gp-modal__close svg { width: 18px; height: 18px; }
.gp-modal__body > .gp-weather, .gp-modal__body > .gp-calclock { margin: 0; }

/* Dark mode. The site dims the page with a filter on <html>, and re-inverts every <img> to keep pictures natural. A modal <dialog>
   is drawn in the browser's top layer, which that page filter does not reach, so the pop-up needs its own dark colors, and its
   images must not be re-inverted (nothing inverted them in the first place). The blocks inside inherit their colors, so they follow. */
html.gracepress-dark-active .gp-modal__panel { background: #1c1a17; color: #ece8df; border-color: rgba(236, 232, 223, .16); }
html.gracepress-dark-active .gp-modal__close { background: rgba(236, 232, 223, .12); }
html.gracepress-dark-active .gp-modal__close:hover { background: rgba(236, 232, 223, .22); }
html.gracepress-dark-active .gp-modal img { filter: none !important; opacity: 1 !important; }

@media (prefers-reduced-motion: reduce) {
  .gp-tick { --tin: none !important; --tout: none !important; }
  .gp-modal__panel, .gp-wbar.is-live .gp-wbar__text { animation: none; }
}
@media print { .gp-tick, .gp-wbar, .gp-modal { display: none; } }