/* Google Ads #yours (Evan picked V2, 2026-10-02): a search types out at a time of day; the answer under it says if
   the ad shows or is skipped; the timeline on the right marks that time against the open hours. js/ga-yours.js. */
#yours .gy-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px; align-items: end; margin-bottom: 36px; }
#yours .gy-head .gex-lede { max-width: none; }
.gy-tabs { display: inline-flex; gap: 6px; padding: 6px; border-radius: 40px; background: #f5f5f7; margin-bottom: 24px; }
.gy-tabs button { height: 36px; padding: 0 18px; border-radius: 30px; border: 0; background: transparent; color: #000; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  transition: background .35s cubic-bezier(.5, 0, .15, 1), color .35s cubic-bezier(.5, 0, .15, 1); }
.gy-tabs button[aria-selected="true"] { background: #000; color: #fff; }
.gy-card { border-radius: 24px; background: #eef3fd; padding: 28px 36px 30px; display: grid; grid-template-columns: minmax(0, 360px) minmax(96px, 1fr) minmax(0, 380px); gap: 40px; align-items: start; }
/* middle: when the search happened. The time rolls to the next one as each search starts; when the answer
   lands the pill pulses once and the arrow nudges toward the timeline. */
.gy-mid { position: relative; align-self: stretch; display: grid; place-items: center; }
.gy-mid::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(transparent, #c9d6ee 22%, #c9d6ee 78%, transparent); }
.gy-mid-in { position: relative; display: grid; justify-items: center; gap: 10px; padding: 14px 0; background: #eef3fd; }
.gy-mid-k { font-size: 13px; color: #6e6e73; }
.gy-mid-t { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 13px; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 1px #e5e5ea, 0 1px 6px rgba(32, 33, 36, .1); font-size: 18px; white-space: nowrap; }
.gy-mid-t svg { width: 17px; height: 17px; color: #1a73e8; flex: none; }
.gy-mid-t.is-hit { animation: gy-ring .9s cubic-bezier(.2, .7, .3, 1); }
@keyframes gy-ring { from { box-shadow: 0 0 0 1px #e5e5ea, 0 1px 6px rgba(32, 33, 36, .1), 0 0 0 0 rgba(0, 0, 0, .22); } to { box-shadow: 0 0 0 1px #e5e5ea, 0 1px 6px rgba(32, 33, 36, .1), 0 0 0 12px rgba(0, 0, 0, 0); } }
.gy-roll { display: block; height: 1.3em; line-height: 1.3; overflow: hidden; min-width: 4.4em; text-align: left; }
.gy-roll > span { display: block; transition: transform .45s cubic-bezier(.65, 0, .35, 1), opacity .3s; }
.gy-roll.is-up > span { transform: translateY(-100%); opacity: 0; }
.gy-roll.is-below > span { transform: translateY(100%); opacity: 0; transition: none; }
.gy-mid-a { width: 22px; height: 22px; color: #b0b0b5; transition: color .4s; }
.gy-mid-a.is-go { color: #1a73e8; animation: gy-nudge .7s cubic-bezier(.65, 0, .35, 1); }
@keyframes gy-nudge { 40% { transform: translateX(8px); } }
.gy-k { font-size: 15px; color: #6e6e73; margin: 0 0 14px; }
.gy-k.is-tl { margin-bottom: 36px; }

.gy-bar { height: 60px; border-radius: 999px; background: #fff; box-shadow: 0 1px 6px rgba(32, 33, 36, .16); display: flex; align-items: center; gap: 12px; padding: 0 22px; font-size: 21px; white-space: nowrap; overflow: hidden; }
.gy-bar svg { width: 21px; height: 21px; color: #1a73e8; flex: none; }
.gy-caret { display: inline-block; width: 2px; height: 25px; background: #1a73e8; margin-left: 1px; vertical-align: middle; animation: gy-blink 1s steps(1) infinite; }
@keyframes gy-blink { 50% { opacity: 0; } }

.gy-res { display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; align-items: center; margin-top: 18px; transition: opacity .45s, transform .55s cubic-bezier(.65, 0, .35, 1); }
.gy-res.is-out { opacity: 0; transform: translateY(8px); }
.gy-ic { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #1a73e8; }
.gy-ic svg { width: 18px; height: 18px; }
.gy-rt { font-size: 24px; letter-spacing: -.015em; line-height: 1.15; }
.gy-rd { font-size: 16px; color: #555; line-height: 1.35; }
.gy-res.is-skip .gy-ic { background: #c6cbd3; }
.gy-res.is-skip .gy-rt { color: #6e6e73; }

.gy-day { position: relative; height: 44px; border-radius: 12px; background: #fff; }
.gy-on { position: absolute; top: 8px; bottom: 8px; border-radius: 7px; background: #4285f4; transition: left .6s cubic-bezier(.65, 0, .35, 1), width .6s cubic-bezier(.65, 0, .35, 1); }
.gy-now { position: absolute; top: -8px; bottom: -8px; width: 2px; margin-left: -1px; background: #1a73e8; border-radius: 1px; transition: left .9s cubic-bezier(.65, 0, .35, 1), opacity .4s; }
.gy-now.is-out { opacity: 0; }
.gy-now.is-off { background: #8e8e93; }
.gy-lb { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -4px); background: #1a73e8; color: #fff; font-size: 12px; line-height: 1.4; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.gy-now.is-off .gy-lb { background: #8e8e93; }
.gy-hours { display: flex; justify-content: space-between; font-size: 13px; color: #8e8e93; margin: 9px 2px 10px; }
.gy-when { font-size: 17px; line-height: 1.4; margin: 0; text-wrap: balance; }

@media (max-width: 991px) { .gy-mid { display: none; } #yours .gy-head, .gy-card { grid-template-columns: 1fr; } #yours .gy-head { gap: 20px; } .gy-card { padding: 24px 20px; gap: 32px; } }
@media (max-width: 479px) { .gy-bar { font-size: 18px; } .gy-rt { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .gy-res, .gy-on, .gy-now, .gy-roll > span, .gy-mid-a, .gy-tabs button { transition: none; } .gy-mid-t, .gy-mid-a { animation: none !important; } .gy-caret { animation: none; } }