/* Final reference-alignment adjustments for the portable site. */
#empty-note[hidden] { display: none !important; }
#holiday-wrap[hidden] { display: none !important; }

.pwa-install-card {
  position: fixed;
  z-index: 60;
  inset-inline: 1rem;
  bottom: 1rem;
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  gap: .7rem;
  align-items: center;
  max-width: 34rem;
  margin-inline: auto;
  border: 1px solid rgba(10, 116, 95, .22);
  border-radius: 1.15rem;
  padding: .75rem;
  background: rgba(250, 255, 253, .96);
  box-shadow: 0 20px 45px rgba(13, 55, 46, .22);
  backdrop-filter: blur(16px);
  color: #123c34;
}
.pwa-install-card[hidden] { display: none !important; }
.pwa-install-icon { width: 2.5rem; height: 2.5rem; border-radius: .78rem; object-fit: cover; }
.pwa-install-copy { min-width: 0; }
.pwa-install-copy strong, .pwa-install-copy span { display: block; }
.pwa-install-copy strong { font-size: .83rem; }
.pwa-install-copy span { margin-top: .12rem; color: #4c6861; font-size: .74rem; line-height: 1.35; }
.pwa-install-action, .pwa-install-close { appearance: none; border: 0; font: inherit; cursor: pointer; }
.pwa-install-action { border-radius: .72rem; padding: .55rem .7rem; background: #087c69; color: white; font-size: .76rem; font-weight: 800; white-space: nowrap; }
.pwa-install-close { position: absolute; top: -.45rem; inset-inline-end: -.25rem; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: #e9f2ef; color: #315c53; font-size: 1rem; line-height: 1; }
body.night .pwa-install-card { border-color: rgba(121, 211, 203, .32); background: rgba(11, 38, 54, .96); color: #e6fffb; }
body.night .pwa-install-copy span { color: #b3d6d6; }
body.night .pwa-install-close { background: #1e5263; color: #e6fffb; }

.hero-copy h1 { max-width: 42rem; }
.source-badge .icon { color: currentColor; }
.muted-badge .icon { color: #64748b; }
.finder-panel { transform: translateZ(0); }
.card-main h3 { text-wrap: balance; }
.results-grid > .empty-note { display: block; margin-inline: auto; max-width: 42rem; text-align: center; }

@media (min-width: 1024px) {
  .hero-layout { align-items: start; }
  .hero-copy { padding-top: 2rem; }
}

@media (max-width: 639px) {
  .hero-copy h1 { max-width: 20rem; }
  .source-badge { min-height: 34px; }
}

/* ---------- V6: date tiles + 24h ribbon, in the original palette ---------- */
.date-rail { gap: .55rem; padding: .35rem .1rem .6rem; }
.date-tile {
  position: relative; display: grid; justify-items: center; align-content: center; flex: 0 0 auto;
  width: 72px; min-height: 88px; padding: .5rem .25rem; gap: 0; line-height: 1.15;
  border: 1px solid #dce6e2; border-radius: 18px; background: rgba(255,255,255,.85); color: #59716b;
  scroll-snap-align: center; transition: transform .18s var(--ease-out), border-color .18s, background-color .18s;
}
.date-tile:hover { border-color: #8cc9b7; background: #f8fffc; transform: translateY(-2px); }
.date-tile:active { transform: scale(.95); }
.date-tile .tile-wd, .date-tile .tile-mo { font-size: .7rem; font-weight: 600; }
.date-tile .tile-day { font-family: Manrope, sans-serif; font-size: 1.55rem; font-weight: 800; color: #123d34; font-variant-numeric: tabular-nums; }
.date-tile .tile-tag {
  position: absolute; bottom: -.55rem; left: 50%; transform: translateX(-50%); max-width: 76px;
  padding: .05rem .45rem; border-radius: 999px; background: #e6f4ef; color: #087d63; border: 1px solid #b9e0d3;
  font-size: .62rem; font-weight: 700; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.date-tile.is-holiday { border-color: #e7c873; background: #fffaf0; }
.date-tile.is-holiday .tile-tag { background: #fdf0cc; color: #8a6510; border-color: #ecd393; }
.date-tile.is-active { border-color: #087d63; background: #087d63; box-shadow: 0 10px 22px rgba(8,125,99,.22); color: rgba(255,255,255,.82); }
.date-tile.is-active .tile-day { color: #fff; }
.night .date-tile { border-color: rgba(161,200,216,.64); }
.night .date-tile .tile-tag { background: #e7f2f8; color: #295c74; border-color: #bcd8e6; }
.night .date-tile.is-active { border-color: #295c74; background: #295c74; box-shadow: 0 10px 22px rgba(41,92,116,.24); }
.date-rail { padding-bottom: .9rem; }

.clock-section { padding: 2rem 0 .5rem; }
.clock-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .4rem; }
.clock-head .eyebrow { margin: 0; }
.now-status { display: inline-flex; align-items: center; gap: .55rem; margin: 0; padding: .4rem .85rem; border-radius: 999px; background: #fff; border: 1px solid #dce6e2; color: #123d34; font-size: .85rem; font-weight: 600; box-shadow: 0 8px 20px rgba(18,61,52,.06); }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: #087d63; box-shadow: 0 0 0 0 rgba(8,125,99,.45); animation: v6pulse 2s infinite; }
.now-status[data-mode="night"] .pulse { background: #295c74; box-shadow: 0 0 0 0 rgba(41,92,116,.45); }
.now-status[data-mode="regular"] .pulse { background: #c9a227; animation: none; }
@keyframes v6pulse { 70% { box-shadow: 0 0 0 9px rgba(8,125,99,0); } 100% { box-shadow: 0 0 0 0 rgba(8,125,99,0); } }

.ribbon-box { position: relative; padding-top: 2.1rem; }
.ribbon { position: relative; display: flex; height: 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(18,61,52,.06); }
.seg { height: 100%; }
.seg-night-a { width: 33.333%; background: linear-gradient(90deg, #1f4a5e, #295c74); border-radius: 999px 0 0 999px; }
.seg-day { width: 45.834%; background: repeating-linear-gradient(90deg, #0b9a78 0 12px, #23b38f 12px 14px); }
.seg-night-b { width: 20.833%; background: linear-gradient(90deg, #295c74, #1f4a5e); border-radius: 0 999px 999px 0; }
.now-mark { position: absolute; top: -9px; bottom: -9px; left: var(--x, 0%); width: 3px; margin-left: -1.5px; border-radius: 3px; background: #123d34; transition: left .6s var(--ease-out); }
.now-mark::after { content: ""; position: absolute; bottom: -4px; left: 50%; width: 9px; height: 9px; transform: translateX(-50%); border-radius: 50%; background: #123d34; box-shadow: 0 0 0 3px #fff; }
.now-mark span { position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); padding: .1rem .5rem; border-radius: 8px; background: #123d34; color: #fff; font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ticks { position: relative; height: 1.2rem; margin-top: .7rem; color: #64748b; font-size: .74rem; font-variant-numeric: tabular-nums; }
.ticks span { position: absolute; left: calc(var(--p) * 1%); transform: translateX(-50%); }
.ticks span:first-child { transform: none; }
.ticks span:last-child { transform: translateX(-100%); }
.ribbon-legend { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; margin-top: .35rem; color: #59716b; font-size: .86rem; }
.ribbon-legend p { display: flex; align-items: center; gap: .5rem; margin: 0; }
.legend-swatch { width: 22px; height: 8px; border-radius: 999px; }
.swatch-day { background: #0b9a78; }
.swatch-night { background: #295c74; }

@media (max-width: 639px) {
  .clock-section { padding-top: 1.5rem; }
  .ticks { font-size: .68rem; }
  .date-tile { width: 66px; min-height: 82px; }
}
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } .now-mark { transition: none; } }
@media print { .clock-section { display: none !important; } }

/* ---------- V8: toast, distance, locating ---------- */
.v8-toast { position: fixed; z-index: 80; left: 50%; bottom: 24px; transform: translate(-50%, 12px); max-width: calc(100% - 32px); padding: .75rem 1.1rem; border-radius: 14px; background: #123d34; color: #fff; font-weight: 600; font-size: .9rem; box-shadow: 0 14px 30px rgba(18,61,52,.25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--ease-out); text-align: center; }
.v8-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.distance-chip { display: inline-block; margin-top: .3rem; padding: .1rem .55rem; border-radius: 999px; background: #e6f4ef; color: #087d63; font-size: .75rem; font-weight: 700; direction: ltr; }
#nearby-button.is-locating { animation: v8spin 1s linear infinite; color: #087d63; }
@keyframes v8spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #nearby-button.is-locating { animation: none; } }

/* ---------- V9: credit ---------- */
.site-footer p.credit{display:flex;align-items:center;gap:.4rem;font-weight:600}
.site-footer .credit a{display:inline-flex;align-items:center;gap:.35rem;color:#0a66c2;font-weight:700;text-decoration:none;padding:.2rem .6rem;border-radius:999px;border:1px solid rgba(10,102,194,.3);background:rgba(10,102,194,.06)}
.site-footer .credit a:hover{background:rgba(10,102,194,.12)}
.li-icon{width:16px;height:16px}
.site-footer p.credit{flex:none;white-space:nowrap}
.site-footer .credit a.mail{color:#087d63;border-color:rgba(8,125,99,.3);background:rgba(8,125,99,.06)}.site-footer .credit a.mail:hover{background:rgba(8,125,99,.12)}
@media(max-width:420px){.site-footer p.credit{flex-wrap:wrap;white-space:normal}}