/* =========================================================
   A · ALPENGLOW COMBINED
   Geist. Ink #1B1B1B, warm greys, one rust for real risk, one pine for "on time".
   ========================================================= */
.G { --ink: #1B1B1B; --g2: #6F6662; --g3: #A39994; --risk: #B4472A; --ok: #2F6B4F; background: #ECE8E5; color: var(--ink); font-family: Geist, system-ui, sans-serif }
.G .layer { background: #ECE8E5 }
.G .layer.behind { filter: blur(8px); transform: scale(.96); transition: filter .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1) }
.G .layer.base { transition: filter .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1) }
.G .layer.sheet { background: none }

/* background: alpenglow at the top, pine at the bottom, drifting slowly. Warms when a decision is needed. */
.G .g-bg { position: absolute; inset: 0; overflow: hidden }
.G .b-bg { position: absolute; inset: -21%; background:
  radial-gradient(38% 30% at 18% 8%, #E9B7A4 0, rgba(233, 183, 164, 0) 100%),
  radial-gradient(42% 34% at 88% 4%, #F2D2BC 0, rgba(242, 210, 188, 0) 100%),
  radial-gradient(55% 40% at 60% 58%, #F1EEEC 0, rgba(241, 238, 236, 0) 100%),
  radial-gradient(60% 40% at 15% 96%, #C9D2CB 0, rgba(201, 210, 203, 0) 100%), #ECE8E5;
  animation: drift 34s ease-in-out infinite alternate }
@keyframes drift { to { transform: translate3d(5%, 3%, 0) rotate(8deg) scale(1.06) } }
.G .b-warm { position: absolute; inset: 0; background: radial-gradient(80% 45% at 50% 0, rgba(214, 120, 84, .5), rgba(214, 120, 84, 0) 100%); opacity: 0; transition: opacity 1.3s ease }
.G .b-warm.on { opacity: 1 }
.G .g-fade { position: absolute; top: 0; left: 0; right: 0; height: 89px; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, rgba(236, 224, 218, .8), rgba(236, 224, 218, 0)); backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px); -webkit-mask-image: linear-gradient(#000 34%, transparent); mask-image: linear-gradient(#000 34%, transparent); opacity: clamp(0, calc(var(--sp) * 3), 1) }

/* liquid glass */
.G .gl { background: linear-gradient(155deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .4)); backdrop-filter: blur(21px) saturate(1.5); -webkit-backdrop-filter: blur(21px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .95), 0 13px 34px -21px rgba(90, 45, 30, .4) }

/* top bar */
.G .g-top { display: flex; align-items: center; gap: 8px; padding: 55px 21px 0 }
.G .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 500; letter-spacing: .04em; flex: none }
.G .seg { flex: 1; height: 34px; border-radius: 21px; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; position: relative }
.G .seg button { position: relative; z-index: 1; font-weight: 500; color: var(--g2); text-align: center; transition: color .3s }
.G .seg button.on { color: var(--ink) }
.G .seg .ind, .G .g-days .ind { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 21px; background: rgba(255, 255, 255, .9); box-shadow: 0 3px 8px -3px rgba(80, 40, 30, .25) }

/* hero */
.G .g-hero, .G .g-head { padding: 34px 21px 21px; position: relative }
.G .g-head { padding-top: 68px }
.G .g-head.p { padding-top: 21px }
.G .g-head.f { padding-top: 89px }
.G .g-hello { color: var(--g2); display: flex; align-items: center; gap: 5px }
.G .g-hello.r { color: var(--risk); font-weight: 500 }
.G .g-big { font-size: 21px; line-height: 27px; font-weight: 500; letter-spacing: -.015em; margin-top: 5px; text-wrap: balance }
.G .g-big .g { color: var(--g2) }
.G .g-big .r { color: var(--risk) }
.G .g-m { color: var(--g2) }
.G .g-head .g-m { margin-top: 5px }
.G .g-chips { display: flex; gap: 5px; margin-top: 13px; flex-wrap: wrap }
.G .g-chips.pad { padding: 0 21px; margin-top: 0 }
.G .chip { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 13px; border-radius: 21px; white-space: nowrap }
.G .chip.r { color: var(--risk); font-weight: 500 }
.G .chip.ok { color: var(--ok); font-weight: 500 }
.G .chip.w { font-weight: 500 }
.G .chip.on { background: var(--ink); color: #fff; box-shadow: none }
.G .g-cta { margin-top: 21px; border-radius: 34px; padding: 21px }
.G .g-cta p { color: var(--g2) }
.G .g-btn { height: 44px; padding: 0 21px; border-radius: 21px; background: var(--ink); color: #fff; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 13px; transition: transform .3s cubic-bezier(.2, .9, .25, 1) }
.G .g-btn:active { transform: scale(.97) }
.G .g-btn.wide { width: 100%; margin-top: 21px }
.G .g-btn.ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(27, 27, 27, .12) }
.G .g-pad { padding: 0 21px }
.G .dots { display: inline-flex; gap: 3px; margin-left: 5px }
.G .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--g3); animation: blink 1.2s infinite }
.G .dots i:nth-child(2) { animation-delay: .2s } .G .dots i:nth-child(3) { animation-delay: .4s }
@keyframes blink { 50% { opacity: .2 } }

/* up next card: photo inside the glass */
.G .g-next { margin: 0 21px; padding: 13px; border-radius: 34px }
.G .g-ph { position: relative; height: 144px; border-radius: 21px; overflow: hidden }
.G .g-ph.s { height: 123px; border-radius: 13px }
.G .g-ph img, .G .g-gap > img, .G .th, .G .tl-c img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85) }
.G .g-pchip { position: absolute; left: 8px; bottom: 8px; height: 34px; padding: 0 13px; border-radius: 21px; display: inline-flex; align-items: center; gap: 5px; font-weight: 500 }
.G .g-pchip.r { color: var(--risk) }
.G .g-body { padding: 13px 8px 8px }
.G .g-k { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; line-height: 16.5px; color: var(--g2) }
.G .g-k span { display: inline-flex; align-items: center; gap: 5px }
.G .g-k .tw { color: var(--ink); font-weight: 500 }
.G .g-t { font-size: 16.5px; line-height: 21px; font-weight: 500; margin-top: 8px }
.G .g-foot { display: flex; align-items: center; gap: 13px; margin-top: 13px; padding-top: 13px; border-top: 1px solid rgba(0, 0, 0, .06) }
.G .g-foot.r { color: var(--risk); font-weight: 500; gap: 8px }
.G .g-foot.r span { flex: 1 }
.G .g-walk { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; flex: none }
.G .g-foot .g { color: var(--g2); display: inline-flex; align-items: center; gap: 5px }
.G .seat { flex: 1; height: 3px; border-radius: 3px; background: rgba(0, 0, 0, .08); overflow: hidden; display: block }
.G .seat i { display: block; height: 100%; background: var(--ink) }

/* rows and sections */
.G .g-sec { display: flex; justify-content: space-between; align-items: baseline; padding: 34px 21px 8px; font-weight: 500; color: var(--g2) }
.G .g-sec button { color: var(--ink); font-weight: 500 }
.G .swipe { margin: 0 21px 8px }
.G .sw { border-radius: 21px }
.G .g-row { display: grid; grid-template-columns: 55px 1fr auto; gap: 13px; align-items: center; padding: 13px; border-radius: 21px }
.G .g-row.x { margin: 0 21px 8px }
.G .th { width: 55px; height: 55px; border-radius: 8px }
.G .tm { font-weight: 500; font-variant-numeric: tabular-nums; text-align: right }
.G .tm span { display: block; color: var(--g2); font-weight: 400 }
.G .tt { font-weight: 500; display: flex; align-items: center; gap: 5px; line-height: 16.5px }
.G .mm { color: var(--g2); line-height: 16.5px; margin-top: 3px; display: flex; align-items: center; gap: 5px }
.G .mm.r, .G .g-row.risk .tm { color: var(--risk) }
.G .mm.ok { color: var(--ok) }
.G .mm.w { color: var(--ink); font-weight: 500 }
.G .g-row.past { opacity: .45 }
.G .g-row .g-k { margin-bottom: 3px }

/* gap tiles (from Bento), in glass */
.G .g-gaps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 21px }
.G .g-gaps.one { grid-template-columns: 1fr }
.G .g-gaps.one .g-gap > img { height: 144px }
.G .g-gap { display: flex; flex-direction: column; padding: 8px; border-radius: 21px; min-width: 0 }
.G .g-gap > img { height: 89px; border-radius: 13px }
.G .g-gx { padding: 8px 5px 0; flex: 1 }
.G .g-gx .g-k { margin-bottom: 5px }
.G .g-add { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .8); display: grid; place-items: center; flex: none }
.G .g-gap .g-add { margin: 8px 5px 5px auto }

/* brief */
.G .g-brief, .G .g-card { margin: 0 21px 8px; padding: 21px; border-radius: 21px }
.G .g-brief .g-m { margin-top: 3px }
.G .g-brief ol { margin: 8px 0 0 21px; display: grid; gap: 8px }
.G .src { color: var(--g2); font-size: 10px; line-height: 13px; margin-top: 13px }
.G .g-link { font-weight: 500; margin-top: 8px; height: 34px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0, 0, 0, .2) }

/* tab bar: glass lens */
.G .tabs { left: 21px; right: 21px; bottom: 21px; height: 55px; border-radius: 34px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 5px }
.G .tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; line-height: 13px; color: var(--g2) }
.G .tabs button.on { color: var(--ink) }
.G .tabs .ind { top: 5px; bottom: 5px; border-radius: 28px; background: rgba(255, 255, 255, .78); box-shadow: inset 0 1px 0 #fff, 0 5px 13px -5px rgba(80, 40, 30, .3) }
.G .toast { background: rgba(255, 255, 255, .78); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 13px 34px -13px rgba(80, 40, 30, .35) }
.G .toast button { background: rgba(0, 0, 0, .06) }

/* ---------- Calendar ---------- */
.G .g-days { position: relative; margin: 0 21px; height: 68px; border-radius: 34px; display: grid; grid-template-columns: repeat(5, 1fr); padding: 3px }
.G .g-days .ind { border-radius: 31px }
.G .g-days button { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--g2) }
.G .g-days button span { font-size: 10px; line-height: 13px; letter-spacing: .06em; text-transform: uppercase }
.G .g-days button b { font-weight: 500; font-size: 16.5px; line-height: 21px; color: var(--ink) }
.G .g-days i { width: 3px; height: 3px; border-radius: 50%; margin-top: 3px }
.G .g-days i.dot { background: var(--g3) }
.G .g-sum { display: grid; grid-template-columns: repeat(4, 1fr); padding: 21px 21px 13px; font-size: 10px; line-height: 13px; letter-spacing: .04em; color: var(--g2) }
.G .g-sum b { display: block; font-size: 16.5px; line-height: 21px; color: var(--ink); font-weight: 500; letter-spacing: -.01em }
.G .g-tl { padding: 21px 21px 0 }
.G .tl-row { display: grid; grid-template-columns: 47px 1fr; gap: 8px; align-items: start }
.G .tl-t { padding-top: 8px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right }
.G .tl-t span { display: block; color: var(--g2); font-weight: 400 }
.G .tl-c { display: grid; grid-template-columns: 55px 1fr; gap: 13px; align-items: start; padding: 8px; border-radius: 21px }
.G .tl-c img { width: 55px; height: 55px; border-radius: 13px }
.G .tl-c > div { min-width: 0; align-self: center }
.G .tl-c .why, .G .tl-c .bk, .G .seatl { display: flex; align-items: center; gap: 5px; color: var(--g2); line-height: 16.5px; margin-top: 5px }
.G .tl-c .why { color: var(--ink); align-items: flex-start }
.G .tl-c .why svg { flex: none; margin-top: 2px }
.G .tl-c .why.w { font-weight: 500 }
.G .g-stale { display: flex; gap: 5px; align-items: flex-start; margin-top: 8px; color: var(--ink); font-weight: 500; line-height: 16.5px }
.G .g-stale svg { flex: none; margin-top: 2px }
.G .tl-c .bk { font-size: 10px; letter-spacing: .04em }
.G .seatl { font-size: 13px; margin-top: 8px }
.G .seatl .seat { flex: 0 0 55px }
.G .tl-row.past { opacity: .45 }
.G .tl-row.risk .tl-t { color: var(--risk) }
.G .tl-c.fixed { background: linear-gradient(155deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .2)); box-shadow: inset 0 0 0 1px rgba(27, 27, 27, .14) }
.G .tl-leg { display: flex; padding: 8px 0 8px 47px; position: relative; cursor: pointer }
.G .tl-leg::before { content: ''; position: absolute; left: 63px; top: 0; bottom: 0; border-left: 1px dashed rgba(27, 27, 27, .25) }
.G .tl-leg span { position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: 34px; margin-left: 29px; color: var(--g2) }
.G .tl-leg b { color: var(--ink); font-weight: 500 }
.G .tl-leg.w span { color: var(--ink); font-weight: 500 }
.G .tl-gap { padding: 8px 0 8px 55px; color: var(--g2) }
.G .tl-gap span { display: inline-block; padding-left: 13px; border-left: 2px solid rgba(27, 27, 27, .08) }
.G .tl-now { display: grid; grid-template-columns: 47px 1fr; gap: 8px; align-items: center; margin: 5px 0 }
.G .tl-now span { font-size: 10px; font-weight: 500; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums }
.G .tl-now i { height: 1px; background: var(--ink); position: relative }
.G .tl-now i::before { content: ''; position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink) }

/* ---------- Explore / You ---------- */
.G .g-search { margin: 0 21px 13px; height: 44px; border-radius: 34px; display: flex; align-items: center; gap: 8px; padding: 0 21px; color: var(--g2) }
.G .g-search input { flex: 1; color: var(--ink) }
.G .g-search input::placeholder { color: var(--g2) }
.G .g-filt { display: flex; gap: 5px; padding: 13px 21px 0; overflow-x: auto; scrollbar-width: none }
.G .g-filt::-webkit-scrollbar { display: none }
.G .g-filt.in { padding: 13px 0 0; flex-wrap: wrap }
.G .g-map { margin: 13px 21px 0; border-radius: 34px; padding: 8px; overflow: hidden }
.G .g-map .map { height: 144px; border-radius: 26px; overflow: hidden }
.G .g-mapc { display: flex; align-items: center; justify-content: space-between; padding: 13px 13px 5px }
.G .g-mapc b { font-weight: 500; display: block }
.G .g-mapc span { color: var(--g2) }
.G .g-empty { padding: 21px; color: var(--g2) }
.G .g-card.list { padding: 8px 21px }
.G .g-card .li { display: grid; grid-template-columns: 16px 1fr; gap: 13px; padding: 13px 0; border-top: 1px solid rgba(0, 0, 0, .05) }
.G .g-card .li:first-child { border-top: 0 }
.G .g-card .li svg { margin-top: 3px; color: var(--g2) }
.G .g-card .li b { font-weight: 500; display: block }
.G .g-card .li span { color: var(--g2) }

/* ---------- Detail: Venue's photo page ---------- */
.G .vd { position: absolute; inset: 0; color: #fff; --g2: rgba(255, 255, 255, .68); background: #1A1714 }
.G .v-bg { position: absolute; inset: 0; overflow: hidden; --edge: calc(55% - var(--sp) * 70%) }
.G .v-img, .G .v-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) }
.G .v-img { height: 62%; object-position: 50% 100%; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); transform: translateY(calc(var(--sp) * -21px)) scale(1.06); transform-origin: 50% 100% }
.G .v-fill { object-position: 50% 100%; transform: scale(1.3) }
.G .pb { position: absolute; inset: 0 }
.G .p1 { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--edge) - 21%), #000 calc(var(--edge) - 8%)); mask-image: linear-gradient(to bottom, transparent calc(var(--edge) - 21%), #000 calc(var(--edge) - 8%)) }
.G .p2 { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--edge) - 8%), #000 calc(var(--edge) + 5%)); mask-image: linear-gradient(to bottom, transparent calc(var(--edge) - 8%), #000 calc(var(--edge) + 5%)) }
.G .p3 { backdrop-filter: blur(21px); -webkit-backdrop-filter: blur(21px); -webkit-mask-image: linear-gradient(to bottom, transparent var(--edge), #000 calc(var(--edge) + 18%)); mask-image: linear-gradient(to bottom, transparent var(--edge), #000 calc(var(--edge) + 18%)) }
.G .p4 { backdrop-filter: blur(44px) saturate(1.2); -webkit-backdrop-filter: blur(44px) saturate(1.2); -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--edge) + 13%), #000 calc(var(--edge) + 34%)); mask-image: linear-gradient(to bottom, transparent calc(var(--edge) + 13%), #000 calc(var(--edge) + 34%)) }
.G .v-tint { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20, 16, 12, .32) 0, rgba(20, 16, 12, calc(.18 + var(--sp) * .2)) 13%, rgba(20, 16, 12, calc(var(--sp) * .3)) max(13%, calc(var(--edge) - 13%)), rgba(20, 16, 12, .3) max(13%, calc(var(--edge) + 21%)), rgba(20, 16, 12, .42) 100%) }
.G .v-scroll { position: absolute; inset: 0; z-index: 1; -webkit-mask-image: linear-gradient(to bottom, transparent 89px, #000 123px); mask-image: linear-gradient(to bottom, transparent 89px, #000 123px) }
.G .v-mini { position: absolute; top: 55px; left: 55px; right: 68px; z-index: 3; display: flex; align-items: center; gap: 8px; pointer-events: none; opacity: clamp(0, calc((var(--sp) - .55) * 4), 1); transform: translateY(calc((1 - clamp(0, calc((var(--sp) - .55) * 4), 1)) * 8px)) }
.G .v-mini img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); flex: none }
.G .v-mini div { min-width: 0 }
.G .v-mini b { display: block; font-weight: 500; line-height: 16.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.G .v-mini span { display: block; font-size: 10px; line-height: 13px; color: var(--g2) }
.G .v-spacer { height: 377px }
.G .v-cap { padding: 0 21px 21px; text-shadow: 0 1px 13px rgba(0, 0, 0, .25) }
.G .v-k { font-size: 10px; line-height: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--g2) }
.G .v-t { font-size: 21px; line-height: 27px; font-weight: 500; letter-spacing: -.012em; margin-top: 8px; text-wrap: balance }
.G .v-m { color: var(--g2); margin-top: 3px }
.G .v-inner { padding: 0 21px 89px; display: grid; gap: 8px }
.G .v-sec, .G .v-note, .G .v-alert { border-radius: 21px; padding: 21px; background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12) }
.G .v-note, .G .v-alert { display: flex; gap: 13px; align-items: flex-start; padding: 13px 21px; text-align: left; width: 100% }
.G .v-note svg, .G .v-alert svg { flex: none; margin-top: 3px }
.G .v-alert { background: rgba(255, 164, 138, .2); box-shadow: inset 0 0 0 1px rgba(255, 164, 138, .35); align-items: center }
.G .v-alert p { flex: 1 }
.G .v-note b, .G .v-alert b { font-weight: 500 }
.G .v-lab { font-size: 13px; line-height: 21px; font-weight: 500; color: var(--g2); margin-bottom: 5px }
.G .v-route { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 8px }
.G .v-route b { display: block; font-size: 16.5px; line-height: 21px; font-weight: 500; font-variant-numeric: tabular-nums }
.G .v-route span { display: block; font-size: 10px; line-height: 13px; color: var(--g2) }
.G .v-route i { height: 1px; background: #fff; opacity: .3 }
.G .v-route div:nth-child(3) { text-align: center }
.G .v-route div:last-child { text-align: right }
.G .v-sm { color: var(--g2); margin-top: 8px }
.G .v-bar { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .2); overflow: hidden }
.G .v-bar i { display: block; height: 100%; background: #fff }
.G .v-li { display: flex; gap: 8px; align-items: flex-start }
.G .v-li + .v-li { margin-top: 5px }
.G .v-li svg { flex: none; margin-top: 4px; opacity: .7 }
.G .v-li b { font-weight: 500 }
.G .v-people { display: flex; align-items: center; gap: 13px }
.G .avs { display: flex; flex: none }
.G .vd .av { width: 34px; height: 34px; font-size: 10px; background: rgba(255, 255, 255, .2); box-shadow: 0 0 0 2px rgba(26, 23, 20, .5) }
.G .avs .av + .av { margin-left: -8px }
.G .v-people p span, .G .v-sp p span { display: block; color: var(--g2) }
.G .v-people b, .G .v-sp b { font-weight: 500 }
.G .v-sp { display: flex; gap: 13px; align-items: center; padding: 5px 0 }
.G .v-acts { display: flex; gap: 8px; margin-top: 21px }
.G .v-btn { flex: 1; height: 44px; border-radius: 21px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; background: rgba(255, 255, 255, .16) }
.G .v-btn.pri { background: #fff; color: #1A1714 }
.G .g-x { position: absolute; top: 55px; right: 21px; z-index: 4; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center }
.G .g-x.lt { background: rgba(255, 255, 255, .18); color: #fff; backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px) }
.G .sh .g-x, .G .sh-h .g-x { position: static }

/* ---------- Route: the map is the screen ---------- */
.G .r-map { position: absolute; left: 0; right: 0; top: 0; height: 521px; transform: translateY(calc(var(--sp) * -55px)) }
.G .r-map .map { height: 100% }
.G .r-blur { position: absolute; inset: 0; pointer-events: none; backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px); opacity: var(--sp) }
.G .g-back { position: absolute; top: 55px; left: 21px; z-index: 4; height: 34px; padding: 0 13px 0 8px; border-radius: 21px; display: inline-flex; align-items: center; gap: 3px; font-weight: 500 }
.G .scroll > .g-back { position: relative; top: auto; left: auto; margin: 55px 0 0 21px }
.G .r-spacer { height: 377px; pointer-events: none }
.G .r-sheet { margin: 0 21px; border-radius: 34px; padding: 8px 21px 21px }
.G .r-sheet .g-big { margin-top: 13px }
.G .r-steps { margin-top: 21px; position: relative }
.G .r-step { display: grid; grid-template-columns: 34px 1fr; gap: 13px; padding: 8px 0; position: relative }
.G .r-step + .r-step::before { content: ''; position: absolute; left: 16px; top: -13px; height: 21px; border-left: 1px dashed rgba(27, 27, 27, .25) }
.G .r-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9) }
.G .r-step:last-child .r-ic { background: var(--ink); color: #fff }
.G .r-step b { display: block; font-weight: 500; padding-top: 5px }
.G .r-step div > span { color: var(--g2); display: block }
.G .r-sh { margin: 8px 21px 0; border-radius: 34px }
.G .r-sh .g-k span { gap: 5px }

/* ---------- Sheets: plan and preview ---------- */
.G .sh { background: linear-gradient(170deg, rgba(255, 255, 255, .86), rgba(255, 250, 247, .72)); backdrop-filter: blur(34px) saturate(1.6); -webkit-backdrop-filter: blur(34px) saturate(1.6); box-shadow: inset 0 1px 0 #fff, 0 -21px 55px -34px rgba(80, 40, 30, .45) }
.G .sh-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 13px }
.G .sh-l { font-size: 10px; line-height: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--g2); margin: 21px 0 8px }
.G .g-opts2 { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 3px; border-radius: 21px; background: rgba(0, 0, 0, .04) }
.G .g-opts2.three { grid-template-columns: repeat(3, 1fr) }
.G .g-opts2 button { padding: 8px 13px; border-radius: 18px; text-align: left; transition: background .25s, box-shadow .25s }
.G .g-opts2 button b { display: block; font-weight: 500 }
.G .g-opts2 button span { display: block; font-size: 10px; line-height: 13px; color: var(--g2) }
.G .g-opts2 button.on { background: #fff; box-shadow: 0 3px 8px -3px rgba(80, 40, 30, .25) }
.G .g-from { display: flex; align-items: center; gap: 13px; padding: 13px 21px; border-radius: 21px; background: rgba(0, 0, 0, .04) }
.G .g-from b { display: block; font-weight: 500 }
.G .g-from span { color: var(--g2) }
.G .sh .chip { background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06) }
.G .sh .chip.on { background: var(--ink); box-shadow: none }

/* ---------- Proposal ---------- */
.G .g-skel { margin: 0 21px 8px; padding: 8px; border-radius: 21px; display: grid; grid-template-columns: 55px 1fr; gap: 13px; align-items: center }
.G .g-skel i, .G .g-skel b { display: block; border-radius: 13px; background: linear-gradient(90deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite }
.G .g-skel i { height: 55px }
.G .g-skel b { height: 13px; width: 80%; border-radius: 8px }
.G .g-skel b + b { width: 55%; margin-top: 8px }
@keyframes shimmer { to { background-position: -200% 0 } }
.G .g-bar { position: absolute; left: 21px; right: 21px; bottom: 21px; z-index: 5; display: grid; grid-template-columns: 1fr 2fr; gap: 8px; padding: 8px; border-radius: 34px }
.G .g-bar .g-btn { margin: 0 }
.G .g-bar.one { grid-template-columns: 1fr }

/* ---------- Curveball fix ---------- */
.G .g-opt { display: grid; grid-template-columns: 34px 1fr 13px; gap: 13px; align-items: center; margin: 0 21px 8px; width: calc(100% - 42px); padding: 13px; border-radius: 21px; text-align: left }
.G .g-opt.best { display: block; padding: 8px; border-radius: 34px; margin-bottom: 13px }
.G .g-opt.best .g-ph { border-radius: 26px }
.G .g-opt.best .g-t { margin-top: 0 }
.G .g-opt .g-m { margin-top: 3px; line-height: 16.5px }
.G .oi { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .8) }
.G .fit { display: flex; align-items: flex-start; gap: 5px; margin-top: 8px; color: var(--ink); font-weight: 500 }
.G .fit svg { flex: none; margin-top: 2px }
.G .fit.g { color: var(--g2); font-weight: 400 }
.G .g-opt.gray .tt { color: var(--g2) }
.G .g-foot2 { padding: 8px 21px; color: var(--g2); font-size: 10px; line-height: 13px }

/* ---------- Preview ---------- */
.G .pv-was { display: flex; align-items: center; gap: 8px; margin-top: 21px; color: var(--g2) }
.G .pv-was s { color: var(--g2); flex: 1 }
.G .pv-was span { font-size: 10px }
.G .pv-new { margin-top: 8px; display: grid; grid-template-columns: 55px 1fr; gap: 13px; align-items: center; padding: 13px; border-radius: 21px }
.G .pv-new img { width: 55px; height: 55px; border-radius: 8px; object-fit: cover }
.G .pv-route { margin-top: 8px; border-radius: 21px; padding: 13px; display: grid; grid-template-columns: 89px 1fr; gap: 13px; align-items: center; cursor: pointer }
.G .pv-route .map { height: 55px; border-radius: 8px; overflow: hidden }
.G .pv-rc b { display: block; font-weight: 500 }
.G .pv-rc span { color: var(--g2); line-height: 16.5px; display: block }
.G .pv-then { display: grid; grid-template-columns: 13px 1fr; gap: 13px; padding: 13px 8px 0 21px; align-items: start }
.G .pv-then svg { margin-top: 4px }
.G .pv-then b { display: block; font-weight: 500 }
.G .pv-then span { color: var(--ok) }
.G .pv-note { display: flex; align-items: center; gap: 5px; color: var(--g2); margin-top: 13px; padding-left: 21px }

@media (prefers-reduced-motion: reduce) { .G .b-bg, .G .dots i, .G .g-skel i, .G .g-skel b { animation: none } }

/* ---------- Live updates, held alerts, offline ---------- */
.G .chrome { position: absolute; inset: 0; z-index: 30; pointer-events: none }
.G .chrome > * { pointer-events: auto }
.G .banner { position: absolute; top: 55px; left: 8px; right: 8px; display: grid; grid-template-columns: 34px 1fr 21px; gap: 13px; align-items: start; padding: 13px; border-radius: 26px; background: linear-gradient(155deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7)); box-shadow: inset 0 1px 0 #fff, 0 21px 55px -21px rgba(60, 30, 20, .45) }
.G .banner .bi { width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: #fff; display: grid; place-items: center }
.G .banner .bx { text-align: left; line-height: 16.5px }
.G .banner .bh { display: flex; justify-content: space-between; font-size: 10px; line-height: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--g2); margin-bottom: 3px }
.G .banner b { display: block; font-weight: 500 }
.G .banner .bx > span:last-child { color: var(--g2) }
.G .banner .bc { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .06) }
.G .player { position: absolute; left: 21px; right: 21px; bottom: 89px; height: 55px; border-radius: 34px; padding: 5px 8px 5px 5px; display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; align-items: center; transition: opacity .3s, transform .4s cubic-bezier(.2, .8, .2, 1) }
.G .player.hide { opacity: 0; transform: translateY(21px); pointer-events: none }
.G .player img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover }
.G .player .px { text-align: left; min-width: 0; line-height: 16.5px }
.G .player b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.G .player .px span { display: block; font-size: 10px; line-height: 13px; color: var(--g2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.G .player .pp { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center }
.G .g-held { margin: 21px 21px 0; width: calc(100% - 42px); display: flex; gap: 13px; align-items: flex-start; text-align: left; padding: 13px 21px; border-radius: 21px; line-height: 16.5px; color: var(--g2) }
.G .g-held svg { flex: none; margin-top: 1px; color: var(--ink) }
.G .g-held b { color: var(--ink); font-weight: 500 }
.G .g-off { margin: 21px 21px 0; display: flex; gap: 13px; align-items: flex-start; padding: 13px 21px; border-radius: 21px; background: rgba(27, 27, 27, .82); color: rgba(255, 255, 255, .75); line-height: 16.5px; backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px) }
.G .g-off svg { flex: none; margin-top: 1px; color: #fff }
.G .g-off b { color: #fff; font-weight: 500 }
.G .g-days + .g-held, .G .g-head + .g-off { margin-bottom: 13px }

/* ---------- Planning steps ---------- */
.G .g-steps { margin: 0 21px 8px; padding: 13px 21px; border-radius: 21px }
.G .g-steps div { display: flex; align-items: center; gap: 13px; padding: 5px 0; color: var(--g3); transition: color .3s }
.G .g-steps div.now, .G .g-steps div.done { color: var(--ink) }
.G .g-steps i { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(27, 27, 27, .15); flex: none }
.G .g-steps .done i { background: var(--ink); color: #fff; box-shadow: none }
.G .g-steps .now i { box-shadow: inset 0 0 0 2px var(--ink) }
.G .g-steps div.stop { color: var(--ink) }
.G .g-steps .stop i { background: var(--ink); color: #fff; box-shadow: none }

/* ---------- Sheets: conflict, backups, earlier, stream, venues ---------- */
.G .g-lines { margin-top: 13px; display: grid; gap: 8px }
.G .g-lines > div { display: grid; grid-template-columns: 16px 1fr; gap: 13px; padding: 13px 21px; border-radius: 21px; background: rgba(0, 0, 0, .04) }
.G .g-lines svg { margin-top: 3px }
.G .g-lines b { display: block; font-weight: 500 }
.G .g-lines span { color: var(--g2) }
.G .sh .g-btn.wide + .g-btn.wide { margin-top: 8px }
.G .g-bk { width: 100%; margin-top: 8px; display: grid; grid-template-columns: 55px 1fr 13px; gap: 13px; align-items: center; padding: 13px; border-radius: 21px; text-align: left }
.G .g-bk img { width: 55px; height: 55px; border-radius: 8px; object-fit: cover }
.G .g-bk.no { opacity: .45; cursor: default }
.G .pv-note.g { color: var(--g2); padding-left: 0; align-items: flex-start }
.G .pv-note.g svg { flex: none; margin-top: 4px }
.G .pv-route { grid-template-columns: 89px 1fr 13px }
.G .g-video { position: relative; margin-top: 21px; height: 200px; border-radius: 21px; overflow: hidden; background: #111 }
.G .g-video img { width: 100%; height: 100%; object-fit: cover; opacity: .55 }
.G .g-video .live { position: absolute; top: 13px; left: 13px; height: 21px; padding: 0 8px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; display: grid; place-items: center }
.G .g-video p { position: absolute; left: 21px; right: 21px; bottom: 13px; color: #fff; line-height: 16.5px }
.G .g-bar2 { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; margin-top: 13px }
.G .g-bar2:not(:has(.g-btn:not(.ghost))) { grid-template-columns: 1fr 1fr }
.G .g-bar2 .g-btn { margin: 0 }
.G .g-btn.ghost.r { color: var(--ink) }
.G .g-vmap { margin-top: 13px; height: 144px; border-radius: 21px; overflow: hidden }
.G .g-ven { display: grid; grid-template-columns: 55px 1fr; gap: 13px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(0, 0, 0, .05) }
.G .g-ven:first-of-type { border-top: 0; margin-top: 8px }
.G .g-ven img { width: 55px; height: 55px; border-radius: 8px; object-fit: cover }
.G .g-ven b { display: block; font-weight: 500 }
.G .g-ven span { display: block; color: var(--g2); line-height: 16.5px }
.G .g-ven span + span { font-size: 13px; line-height: 16.5px; color: var(--g2) }
.G .fit.w { color: var(--ink) }
.G .v-row { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 13px }
.G .v-chip { height: 34px; padding: 0 13px; border-radius: 21px; display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, .18); font-weight: 500 }

/* ---------- Wider experience: speakers, people, updates, other days ---------- */
.G .bell { position: relative }
.G .bell .dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px #fff }
.G .seg.x3 { margin: 0 21px 8px; grid-template-columns: repeat(3, 1fr); flex: none; width: auto; display: grid }
.G .pav { width: 55px; height: 55px; border-radius: 50%; display: grid; place-items: center; font-weight: 500; font-size: 13px; letter-spacing: .04em; background: linear-gradient(155deg, #F2D2BC, #C9D2CB); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6) }
.G .pav.lg { width: 89px; height: 89px; font-size: 21px; margin-bottom: 21px }
.G .g-row.p { width: calc(100% - 42px); text-align: left; grid-template-columns: 55px 1fr 13px }
.G .g-row.p .g-k { margin-top: 5px }
.G .tt em, .G .v-sp em { font-style: normal; font-size: 10px; line-height: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--g2); margin-left: 5px; font-weight: 500 }
.G .g-prof { padding: 34px 21px 8px; display: flex; flex-direction: column; align-items: flex-start }
.G .g-prof .g-m { margin-top: 3px }
.G .g-prof .g-btn { margin-top: 21px }
.G .g-two { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; width: 100%; margin-top: 21px }
.G .g-two .g-btn { margin: 0 }
.G .g-req { width: 100%; margin-top: 21px; display: flex; gap: 13px; align-items: flex-start; padding: 13px 21px; border-radius: 21px; line-height: 16.5px }
.G .g-req svg { flex: none; margin-top: 1px; color: var(--ink) }
.G .g-req b { display: block; font-weight: 500 }
.G .g-req span { color: var(--g2) }
.G .v-li.d svg { opacity: 1; color: var(--g2) }
.G .g-card .v-li { margin-top: 8px }
.G .pad2 { padding: 0 21px }
.G .g-upd { width: calc(100% - 42px); margin: 0 21px 8px; display: grid; grid-template-columns: 34px 1fr 13px; gap: 13px; align-items: start; padding: 13px; border-radius: 21px; text-align: left }
.G .g-upd .ui { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .8) }
.G .g-upd .ui.r { background: var(--risk); color: #fff }
.G .g-upd .ui.w { background: var(--ink); color: #fff }
.G .g-upd > svg { margin-top: 21px }
.G .g-upd .g-k { margin-bottom: 3px }
.G .vd .v-sp { width: 100%; text-align: left; display: grid; grid-template-columns: 34px 1fr 13px; gap: 13px; align-items: center; padding: 5px 0 }
.G .vd .v-sp em { color: var(--g2) }
.G .v-alert.n { background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12) }
.G .v-alert .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 500; background: rgba(255, 255, 255, .2); flex: none }
.G .g-filt.in.pad2 { padding: 0 21px }

/* ---------- Plan sheet: explicit time window ---------- */
.G .sh-l em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--g3); margin-left: 5px }
.G .g-time { display: grid; grid-template-columns: 1fr 13px 1fr auto; gap: 13px; align-items: center; padding: 13px 13px 13px 21px; border-radius: 21px; background: rgba(0, 0, 0, .04) }
.G .g-time span { display: block; font-size: 10px; line-height: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--g2) }
.G .g-time b { display: block; font-weight: 500; font-size: 16.5px; line-height: 21px; font-variant-numeric: tabular-nums }
.G .g-time > svg { color: var(--g3) }
.G .g-time .st { display: flex; gap: 5px }
.G .g-time .st button { width: 34px; height: 34px; border-radius: 50%; background: #fff; font-size: 16.5px; font-weight: 500; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .08) }
.G .g-hint { color: var(--g2); margin-top: 8px }
.G .sh .g-filt.in { padding-top: 8px }
/* Session page: the description sits under the title */
.G .v-about { margin-top: 13px; line-height: 21px; max-width: 34ch; text-shadow: 0 1px 13px rgba(0, 0, 0, .3) }
.G .v-proto { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; color: var(--g2); font-size: 13px; line-height: 16.5px }
.G .v-proto svg { flex: none; margin-top: 2px }
.G .v-proto b { color: #fff; font-weight: 500 }
.G .g-pchip[data-a] { cursor: pointer }
.G .g-pchip svg:last-child { opacity: .5 }
.G button.chip { cursor: pointer }
/* where you are: right side of the greeting on Today */
.G .g-hi { display: flex; flex-direction: column; align-items: flex-start; gap: 3px }
.G .g-here { display: inline-flex; align-items: center; gap: 3px; color: inherit; font: inherit; white-space: nowrap; opacity: .9 }
.G .g-here svg { opacity: .8 }

/* Plan sheet, slimmer: one-line location, compact segments, a break switch */
.G .g-time.one { grid-template-columns: 1fr auto; margin-top: 8px; padding: 8px 8px 8px 21px }
.G .g-hint b { color: var(--ink); font-weight: 500 }
.G .g-from { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 13px; border-radius: 21px; background: rgba(0, 0, 0, .04) }
.G .g-from > span { flex: 1 } .G .g-from > span b { display: block; font-weight: 500; color: var(--ink) }
.G .g-from small { display: block; font-size: 10px; line-height: 13px; color: var(--g2) }
.G .g-from button { height: 34px; padding: 0 13px; border-radius: 21px; background: #fff; font-weight: 500; box-shadow: 0 1px 3px rgba(0, 0, 0, .08) }
.G .g-opts2.sm { margin-top: 8px }
.G .g-opts2.sm button { padding: 5px 8px; text-align: center }
.G .g-sw { display: flex; align-items: center; gap: 13px; width: 100%; margin-top: 21px; padding: 8px 8px 8px 21px; border-radius: 21px; background: rgba(0, 0, 0, .04); text-align: left }
.G .g-sw > span { flex: 1 } .G .g-sw b { display: block; font-weight: 500 }
.G .g-sw > span span { display: block; font-size: 10px; line-height: 13px; color: var(--g2) }
.G .g-sw i { width: 47px; height: 29px; border-radius: 15px; background: rgba(0, 0, 0, .16); position: relative; flex: none; transition: background .25s }
.G .g-sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .3s cubic-bezier(.2, .8, .2, 1) }
.G .g-sw[aria-checked="true"] i { background: var(--ink) }
.G .g-sw[aria-checked="true"] i::after { transform: translateX(18px) }

/* Proposal cards: take out (×) and swap for the backup, before anything is saved */
.G .tl-c.px { position: relative; padding-right: 47px }
.G .tl-x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .7); color: var(--g2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06) }
.G .tl-x:hover { color: var(--ink) }
.G .tl-c .bk.sw { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(27, 27, 27, .25); text-underline-offset: 3px; text-align: left }

/* Proposal backups: read what each one is before swapping */
.G .g-alt { margin-top: 8px; padding: 13px; border-radius: 21px }
.G .g-alt-h { display: grid; grid-template-columns: 55px 1fr; gap: 13px; align-items: center }
.G .g-alt-h img { width: 55px; height: 55px; border-radius: 8px; object-fit: cover; display: block }
.G .g-alt .g-m { margin: 8px 0 5px }
.G .g-alt .v-li { line-height: 16.5px }
.G .g-alt .v-li.ok, .G .g-alt .v-li.ok svg { color: var(--ink) }
.G .g-alt .g-two { grid-template-columns: 1fr 1fr; margin-top: 13px }
.G .sh .g-alt + .g-btn.wide { margin-top: 13px }

.G .g-msg p { margin-top: 8px; line-height: 21px }
.G .g-msg { margin: 13px 0 0 }
/* Session-full fix card: pick an option, then the button at the bottom acts on it */
.G .g-sec.f { padding: 21px 21px 8px }
.G .g-opt.rad { grid-template-columns: 21px 1fr 55px; align-items: start; box-shadow: none; transition: box-shadow .2s }
.G .g-opt.rad.on { box-shadow: inset 0 0 0 1.5px var(--ink) }
.G .g-opt.rad .rd { width: 21px; height: 21px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--g2); display: grid; place-items: center }
.G .g-opt.rad.on .rd { box-shadow: inset 0 0 0 1.5px var(--ink) }
.G .g-opt.rad.on .rd::after { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--ink) }
.G .g-opt.rad .th { width: 55px; height: 55px; border-radius: 8px; object-fit: cover }
.G .g-opt.rad .oi { justify-self: end }
.G .g-opt.rad .tt { font-weight: 500 }
.G .g-held.seat > span { flex: 1 }
.G .g-held.seat > svg:last-child { align-self: center; color: var(--g2) }

/* ---------- Touch: 34px icon buttons get a 44px tap area ---------- */
.G .g-add, .G .sh .g-x, .G .sh-h .g-x, .G .banner .bc { position: relative; top: auto; right: auto }
.G .g-add::after, .G .g-x::after, .G .tl-x::after, .G .banner .bc::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%) }

/* ---------- Sheets: one label style, actions pinned to the bottom ---------- */
.G .sh-l { font-size: 13px; line-height: 21px; letter-spacing: 0; text-transform: none; color: var(--g2); font-weight: 500 }
.G .sh-foot { position: sticky; bottom: -34px; z-index: 2; display: grid; gap: 8px; margin: 21px -21px -34px; padding: 13px 21px 34px; background: linear-gradient(to bottom, rgba(246, 243, 241, 0), rgba(246, 243, 241, .96) 13px) }
.G .sh-foot.two { grid-template-columns: 1fr 1fr }
.G .sh-foot .g-btn { margin: 0; width: 100% }
.G .sh-h .g-m { margin-top: 5px }
/* Plan sheet: a selected choice is outlined, so the only solid black is the main button */
.G .sh .chip.on { background: rgba(255, 255, 255, .7); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink) }
/* Plan sheet: the end time is the control. Tap it to pick a time. */
.G .g-time.two { grid-template-columns: 1fr 13px 1fr }
.G .g-tp { position: relative; display: block; margin: -5px 0; padding: 5px 13px; border-radius: 13px; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(27, 27, 27, .08); cursor: pointer }
.G .g-tp b { display: flex; align-items: center; justify-content: space-between; gap: 5px }
.G .g-tp b svg { transform: rotate(90deg); color: var(--g2) }
.G .g-tp select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16.5px }
.G .sh-foot .g-bar2 { margin: 0 }

/* ---------- Round 2: badges, richer plan card, sideways gap tiles, calendar days, Explore rows, session card ---------- */
/* Badge: a small label you scan. Never tappable. */
.G .bdg { display: inline-flex; align-items: center; gap: 3px; height: 21px; padding: 0 8px; border-radius: 8px; background: rgba(27, 27, 27, .06); color: var(--ink); font-size: 10px; line-height: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; flex: none }
.G .bdg.k { background: var(--ink); color: #fff }
.G .bdg.r { background: var(--risk); color: #fff }
.G .vd .bdg { background: rgba(255, 255, 255, .18); color: #fff }
.G .bdgs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px }
.G .bdgs:empty { display: none }
.G .tm .bdg { display: inline-flex; margin-top: 3px; color: var(--ink); font-weight: 500 }
.G .g-k .bdg { margin: -2px 0 }
.G .bdgs.pad2 { padding: 0 21px; margin-top: 0 }
/* Plan card on Start */
.G .g-cta { padding: 21px }
.G .g-ct { display: flex; align-items: center; gap: 13px }
.G .g-ct b { display: block; font-size: 16.5px; line-height: 21px; font-weight: 500 }
.G .g-ct div span { display: block; color: var(--g2) }
.G .g-thumbs { display: flex; flex: none }
.G .g-thumbs img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); filter: saturate(.85) }
.G .g-thumbs img + img { margin-left: -13px }
.G .g-ul { list-style: none; margin-top: 13px; display: grid; gap: 5px; color: var(--g2); line-height: 16.5px }
.G .g-ul li { display: flex; gap: 8px; align-items: flex-start }
.G .g-ul svg { flex: none; margin-top: 2px; color: var(--ink) }
.G .g-cta .g-btn { margin-top: 21px }
/* Fits your gaps: a sideways row */
.G .g-gaps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin: 0; padding: 0 21px 3px; scroll-padding: 0 21px; scrollbar-width: none }
.G .g-gaps::-webkit-scrollbar { display: none }
.G .g-gap { flex: 0 0 233px; scroll-snap-align: start }
.G .g-gaps.one .g-gap { flex: 1 1 auto }
.G .g-addl { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 13px; border-radius: 21px; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(27, 27, 27, .1); font-weight: 500; flex: none; position: relative }
.G .g-addl::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%) }
.G .g-gap .g-addl { margin: 13px 5px 5px; align-self: flex-start }
/* Calendar: a plain row of days */
/* Day pills (Calendar, Explore): the picked day is a taller white pill */
.G .g-dpills { display: flex; justify-content: space-between; align-items: center; height: 77px; margin: 0 21px }
.G .g-dpills + .g-search { margin-top: 13px }
.G .g-dpills button { width: 52px; height: 68px; border-radius: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; position: relative; transition: height .3s cubic-bezier(.2, .9, .25, 1), background .25s, box-shadow .25s, opacity .25s, transform .3s cubic-bezier(.2, .9, .25, 1) }
.G .g-dpills button:active:not(:disabled) { transform: scale(.95) }
.G .g-dpills span { font-size: 10px; line-height: 13px; letter-spacing: .06em; color: var(--g2) }
.G .g-dpills b { font-size: 16.5px; line-height: 21px; font-weight: 500; font-variant-numeric: tabular-nums }
.G .g-dpills i { position: absolute; bottom: 8px; width: 3px; height: 3px; border-radius: 50%; background: var(--g2) }
.G .g-dpills .on { height: 77px; background: #fff; box-shadow: 0 13px 34px -13px rgba(90, 45, 30, .35), 0 3px 8px -3px rgba(90, 45, 30, .15) }
.G .g-dpills .on span { color: var(--ink); font-weight: 500 }
.G .g-dpills .on i { background: var(--ink) }
.G .g-dpills button:disabled { opacity: .4; cursor: default }
.G .g-dpills + .g-held { margin-bottom: 13px }
/* Proposal cards: swap sits apart from the content */
.G .tl-swap { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; height: 34px; margin-top: 5px; padding: 8px 5px 0; border-top: 1px solid rgba(27, 27, 27, .08); box-sizing: content-box; font-weight: 500; text-align: left }
.G .tl-swap span { flex: 1; color: var(--g2); font-weight: 400 }
.G .tl-c .why { margin-top: 8px }
/* Explore rows: time, title, one line about it, topics */
.G .g-row.xr { align-items: start }
.G .xr-t { color: var(--g2); line-height: 16.5px; margin-bottom: 3px }
.G .xr-t b { color: var(--ink); font-weight: 500 }
.G .xr-d { color: var(--g2); line-height: 16.5px; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.G .g-row.xr .mm { margin-top: 8px }
.G .g-row.xr .g-addl { margin-top: 13px }
.G .g-sicon { width: 34px; height: 34px; margin-right: -13px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); flex: none; position: relative }
.G .g-sicon::after { content: ''; position: absolute; inset: -5px }
.G .g-ic { display: flex; align-items: center; gap: 5px }
/* Session page: the time is readable, everything sits in one card, actions stay at the bottom */
.G .v-time { font-size: 16.5px; line-height: 21px; font-weight: 500; font-variant-numeric: tabular-nums }
.G .v-t { margin-top: 3px }
.G .v-part + .v-part { margin-top: 13px; padding-top: 13px; border-top: 1px solid rgba(255, 255, 255, .12) }
.G .v-people { width: 100%; text-align: left }
.G button.v-people > svg { margin-left: auto; opacity: .7 }
.G .v-rowb { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 0; text-align: left }
.G .v-rowb > svg:first-child { flex: none; opacity: .8 }
.G .v-rowb > svg:last-child { margin-left: auto; flex: none; opacity: .7 }
.G .v-rowb span { flex: 1; line-height: 16.5px }
.G .v-rowb small, .G .v-must small { display: block; font-size: 13px; line-height: 16.5px; color: var(--g2); margin-top: 3px }
.G .v-must { width: 100%; display: flex; align-items: center; gap: 13px; text-align: left }
.G .v-must > span { flex: 1 }
.G .v-must b { display: flex; align-items: center; gap: 5px; font-weight: 500 }
.G .v-must i { width: 47px; height: 29px; border-radius: 15px; background: rgba(255, 255, 255, .2); position: relative; flex: none; transition: background .25s }
.G .v-must i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 50%; background: #fff; transition: transform .3s cubic-bezier(.2, .8, .2, 1) }
.G .v-must[aria-checked="true"] i { background: #fff }
.G .v-must[aria-checked="true"] i::after { background: #1A1714; transform: translateX(18px) }
.G .vd .v-acts { position: absolute; left: 21px; right: 21px; bottom: 21px; z-index: 3; margin: 0; padding: 8px; border-radius: 34px; background: rgba(26, 23, 20, .5); backdrop-filter: blur(21px) saturate(1.3); -webkit-backdrop-filter: blur(21px) saturate(1.3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12) }
.G .vd .v-acts { display: grid; grid-template-columns: 1fr 2fr }
.G .vd .v-acts:not(:has(.v-btn + .v-btn)) { grid-template-columns: 1fr }
.G .v-inner { padding-bottom: 123px }
/* Proposal swap sheet */
.G .g-alt-f { display: flex; align-items: center; justify-content: space-between; margin-top: 13px }
.G .g-tlink { display: inline-flex; align-items: center; gap: 3px; height: 34px; font-weight: 500 }
.G .g-alt .v-li b { font-weight: 500; color: var(--ink) }
/* Route: the leave time is the number you act on */
.G .r-sheet .g-big { font-size: 27px; line-height: 34px }
.G .tm { display: flex; flex-direction: column; align-items: flex-end }
.G .seatl { white-space: nowrap } .G .seatl .seat { flex: 0 0 34px }
.G .g-alt-f .g-btn { margin: 0 } .G .g-alt .bdgs + .v-li { margin-top: 8px }
.G .v-img, .G .v-fill { filter: saturate(.85) brightness(.78) }
.G .g-pchip.r { background: rgba(255, 255, 255, .92); backdrop-filter: none; -webkit-backdrop-filter: none }
/* No signal: a calm note, lighter than a real risk */
.G .g-off { background: linear-gradient(155deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .4)); color: var(--g2); box-shadow: inset 0 0 0 1px rgba(27, 27, 27, .1); backdrop-filter: blur(21px); -webkit-backdrop-filter: blur(21px) }
.G .g-off svg { color: var(--ink) }
.G .g-off b { color: var(--ink) }
/* ---------- Round 3 ---------- */
/* Swap sheets: pick one alternative, one Swap button at the bottom */
.G .g-alt.rad { cursor: pointer; transition: box-shadow .2s }
.G .g-alt.rad.on { box-shadow: inset 0 0 0 1.5px var(--ink), 0 13px 34px -21px rgba(90, 45, 30, .4) }
.G .g-alt.rad .g-alt-h { grid-template-columns: 21px 55px 1fr }
.G .rad .rd { width: 21px; height: 21px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--g2); display: grid; place-items: center }
.G .rad.on .rd { box-shadow: inset 0 0 0 1.5px var(--ink) }
.G .rad.on .rd::after { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--ink) }
.G .g-alt .bdgs { margin-top: 13px }
.G .g-alt .v-li { margin-top: 8px; color: var(--g2) }
.G .g-alt .g-tlink { margin-top: 5px }
/* Timeline: one line. Free time and leave times both sit on it. */
.G .tl-free { cursor: default }
/* Explore rows: time, title, tags, Add */
.G .g-row.xr { align-items: center; padding: 13px }
.G .g-row.xr .th { align-self: start }
.G .g-row.xr .g-addl { margin-top: 0 }
.G .g-row.xr .g-k { margin-bottom: 3px }
/* Session page: About inside the card */
.G .v-desc { line-height: 21px }
.G .v-proto { display: block }
.G .sh-foot { background: linear-gradient(to bottom, rgba(244, 241, 239, 0), rgba(244, 241, 239, .97) 21px); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); -webkit-mask-image: none }
.G .sh-foot .g-btn.ghost { background: #fff; box-shadow: inset 0 0 0 1px rgba(27, 27, 27, .12) }
.G .g-opt .v-li { margin-top: 8px; color: var(--g2); line-height: 16.5px }
.G .g-opt .v-li b { color: var(--ink); font-weight: 500 }
.G .g-opt.rad > div { min-width: 0 }
/* ---------- Directions: the map stays, one half-height sheet, only its content scrolls ---------- */
.G .r-map { transform: none }
.G .r-sheet { position: absolute; left: 0; right: 0; bottom: 0; top: 47%; z-index: 2; margin: 0; padding: 0; border-radius: 34px 34px 0 0; overflow: hidden }
.G .r-sheet .r-in { position: absolute; inset: 0; padding: 21px 21px 34px }
.G .r-sheet .g-big { margin-top: 0 }
.G .r-alt { margin-top: 21px; padding-top: 21px; border-top: 1px solid rgba(27, 27, 27, .08) }
.G .r-alt .g-k span { gap: 5px }
.G .r-alt .g-t { margin-top: 5px }
/* Calendar and proposal cards: the photo sits in the middle, so space above and below it is equal */
.G .tl-c > img { align-self: center }
/* Icons line up with the first line of the text next to them */
.G .g-alt .v-li svg, .G .g-opt .v-li svg { margin-top: 1px }
.G .mm { align-items: flex-start }
.G .mm svg { flex: none; margin-top: 2px }
.G .g-off svg { margin-top: 0 }
/* Small maps: no text smaller than 10px. Thumbnails drop labels; the Venues map keeps venue names only, larger. */
.G .pv-route .map text { display: none }
.G .g-vmap .map text.sl { display: none }
/* ---------- Round 5 ---------- */
/* Today header: location lives in the top bar, so the greeting and headline read as one block */
.G .g-hero .g-hello { color: var(--g2) }
/* Sheet buttons sit on a solid strip; nothing shows through */
.G .sh-foot { background: #FBFAF9; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 -1px 0 rgba(27, 27, 27, .06) }
/* Timeline cards: photo at the top, same space on every side */
.G .tl-c { padding: 13px; align-items: start }
.G .tl-c > img { align-self: start; border-radius: 8px }
.G .tl-c > div { align-self: start }
.G .tl-c .tt { margin-top: -2px }
.G .tl-c.px { padding-right: 55px }
.G .tl-x { top: 13px; right: 13px }
/* Explore: pick the day */
/* Explore: what to list, with its filter beside it */
.G .g-xbar { display: flex; gap: 8px; margin: 0 21px; position: relative; z-index: 5 }
.G .g-xbar .seg.x3 { margin: 0; flex: 1; min-width: 0 }
.G .g-xf { position: relative; flex: none }
.G .g-xfb { width: 104px; height: 34px; border-radius: 21px; display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 0 13px; font-weight: 500; white-space: nowrap; transition: background .25s, color .25s, transform .3s cubic-bezier(.2, .9, .25, 1) }
.G .g-xfb:active { transform: scale(.97) }
.G .g-xfb.on { background: var(--ink); color: #fff; box-shadow: none }
.G .g-xfb svg { flex: none; transition: transform .25s }
.G .g-xfb[aria-expanded="true"] svg { transform: rotate(180deg) }
.G .g-scrim { position: fixed; inset: 0; z-index: 1; cursor: default }
.G .g-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 2; width: 221px; padding: 5px; border-radius: 21px; background: rgba(255, 255, 255, .92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 21px 55px -13px rgba(90, 45, 30, .35), 0 3px 8px -3px rgba(90, 45, 30, .15); transform-origin: top right }
.G .g-menu button { width: 100%; height: 44px; display: grid; grid-template-columns: 13px 1fr auto; align-items: center; gap: 8px; padding: 0 13px 0 8px; border-radius: 16px; text-align: left; transition: background .2s }
.G .g-menu button:hover, .G .g-menu button:active { background: rgba(27, 27, 27, .05) }
.G .g-menu button[aria-checked="true"] span { font-weight: 500 }
.G .g-menu i { display: grid; place-items: center }
.G .g-menu small { font-size: 13px; color: var(--g2); font-variant-numeric: tabular-nums }
@media (prefers-reduced-motion: no-preference) { .G .g-menu { animation: g-menu-in .28s cubic-bezier(.2, .9, .25, 1) } }
@keyframes g-menu-in { from { opacity: 0; transform: scale(.94) translateY(-5px) } }
.G .g-xbar + [data-results] .g-sec { padding-top: 21px }
.G .g-hint.g-c { text-align: center; margin-top: 8px }
/* Even padding: the last thing in a card sits the same distance from the edge as the first */
.G .g-gap .g-addl { margin: 13px 5px 0 }
.G .g-body { padding: 13px 8px 0 }
.G .g-brief { padding-bottom: 13px }
.G .tl-c .tt { margin-top: 0 }
.G .tl-swap { height: auto; padding: 13px 0 0; line-height: 21px; position: relative }
.G .tl-swap::after, .G .g-tlink::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%) }
.G .g-alt .g-tlink { height: 21px; margin-top: 13px; position: relative }
.G .g-tlink { position: relative }
.G .tl-c.px { padding-right: 13px }
.G .tl-c.px .tt { padding-right: 34px }
.G .g-row.xr > div { min-width: 0 }
.G .g-row.xr .g-k span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
/* ---------- Plan sheet, summary first ---------- */
.G .sh .chip.on { background: var(--ink); color: #fff; box-shadow: none }
.G .g-sum2 { margin-top: 13px; padding: 21px; border-radius: 21px }
.G .g-sum2-t b { display: block; font-size: 21px; line-height: 27px; font-weight: 500; font-variant-numeric: tabular-nums }
.G .g-sum2-t span { color: var(--g2) }
.G .g-around { margin-top: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: var(--g2) }
.G .g-sum2 .bdgs { margin-top: 13px }
.G .g-sum2 .g-m { margin-top: 8px }
.G .g-sum2 .g-tlink { margin-top: 13px; height: 21px }
.G .g-ask { margin-top: 13px; display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 13px; border-radius: 21px; background: #fff; box-shadow: inset 0 0 0 1px rgba(27, 27, 27, .12) }
.G .g-ask.on { box-shadow: inset 0 0 0 1.5px var(--ink) }
.G .g-ask label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--g2) }
.G .g-ask input { flex: 1; height: 34px; color: var(--ink); text-overflow: ellipsis }
.G .g-ask input::placeholder { color: var(--g2) }
.G .g-mic { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; position: relative }
.G .g-mic::after { content: ''; position: absolute; inset: -5px }
.G .g-ask.on .g-mic { animation: blink 1.2s infinite }
.G .g-heard { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px }
.G .g-heard > span { color: var(--g2); margin-right: 3px }
.G .g-heard em { font-style: normal; color: var(--g2) }
.G .g-count { margin-top: 13px; color: var(--g2) }
.G .g-count b { color: var(--ink); font-weight: 500 }
.G .g-count.none { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.G .g-count.none b { width: 100%; color: var(--risk) }
.G .g-adj { margin-top: 8px; border-top: 1px solid rgba(27, 27, 27, .08) }
.G .g-adj .g-m { margin-top: 0 }
.G .sh-n { font-weight: 400; color: var(--g2); margin-left: 5px }
.G .g-cust { position: relative; cursor: pointer }
.G .g-cust select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 16px }
.G .g-adj .g-sw + .g-sw { margin-top: 8px }
.G .g-btn[disabled] { opacity: .35; cursor: default }
.G .g-count.none b { color: var(--ink) }
.G .tl-leg span { display: block; padding: 7px 0; line-height: 21px }
.G .tl-leg span svg { display: inline-block; vertical-align: -2px; margin-right: 5px }
/* Plan sheet, all open: a small summary, the count sits with the button */
.G .g-sum2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 13px; padding: 13px 13px 13px 21px }
.G .g-sum2 > b { font-size: 16.5px; line-height: 21px; font-weight: 500; font-variant-numeric: tabular-nums }
.G .g-sum2 .g-around { margin: 0 }
.G .g-adj { margin-top: 0; border-top: 0 }
.G .sh-foot .g-count { margin: 0 0 3px; text-align: center }
.G .sh-foot .g-count.none { justify-content: center; text-align: center }
.G .sh-foot .g-count.none b { width: 100% }
/* Action bars: secondary on the left, main on the right, 1 : 2. Labels stay on one line in the narrow column. */
.G .g-btn { white-space: nowrap }
.G .g-bar .g-btn, .G .g-bar2 .g-btn, .G .g-two .g-btn { padding: 0 13px }
/* Photos on the golden ratio, 1.618 : 1 */
.G .g-ph, .G .g-ph.s { height: auto; aspect-ratio: 1.618 }
.G .g-gap > img, .G .g-gaps.one .g-gap > img { height: auto; aspect-ratio: 1.618 }
.G .g-video { height: auto; aspect-ratio: 1.618 }
/* Badges: one look. "Live" on the video is the badge on a photo. */
.G .g-video .live { font-weight: 500; letter-spacing: .04em; background: rgba(255, 255, 255, .18); backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px) }
.G .v-sp b .bdg { margin-left: 5px; vertical-align: 1px }
/* Sheets: the first thing under the header (title, or title and its note) is always 13px below it */
.G .sh > .sh-h + * { margin-top: 13px }
/* Two weights only: 400 and 500. Bold text (b, strong) and the toast's Undo use 500. */
.G b, .G strong, .G .toast button { font-weight: 500 }
/* Icons line up with the first line of text: session page rows and the plan sheet's "Starting from" */
.G .v-rowb { align-items: flex-start }
.G .v-rowb > svg:first-child { margin-top: 2px }
.G .v-rowb > svg:last-child { align-self: center; margin-top: 0 }
.G .g-from > svg { align-self: flex-start; margin-top: 3px }

/* ---------- Final polish ---------- */
/* Text: no single word left alone on a last line */
.G { text-wrap: pretty }
/* Times line up in lists */
.G .g-k, .G .mm, .G .tl-leg, .G .v-li, .G .bdg, .G .chip, .G .g-pchip, .G .v-rowb small { font-variant-numeric: tabular-nums }
/* Speakers list: the session line stays on one line */
.G .g-row.p > div { min-width: 0 }
.G .g-row.p .g-k span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
/* Explore rows: the time and distance wrap rather than get cut off on small phones */
.G .g-row.xr .g-k span { white-space: normal; overflow: visible }
/* Titles of two lines split evenly, never one word on the second line */
.G .tt, .G .g-t { text-wrap: balance }
/* The own-words field: the whole 44px row focuses the input */
.G .g-ask label { margin: -5px 0; padding: 5px 0 }
/* Touch: 34px controls get a 44px tap area */
.G button.chip, .G .g-here, .G .g-link, .G .g-from button, .G .player .px, .G .v-people, .G .g-sec button { position: relative }
.G button.chip::after, .G .g-back::after, .G .g-here::after, .G .g-link::after, .G .g-pchip[data-a]::after, .G .g-from button::after, .G .seg button::after, .G .player .px::after, .G .v-people::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%) }
.G .g-sec button::after, .G .bell::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%) }
/* Pressed: small controls shrink like buttons, rows and cards like cards */
.G :is(.chip, .g-addl, .g-back, .g-x, .g-here, .g-pchip[data-a], .tl-x, .g-mic, .pp, .bell, .g-link, .g-tlink, .g-sec button, .g-from button, .g-tp, .toast button, .banner .bc, .v-btn) { transition: transform .3s cubic-bezier(.2, .9, .25, 1), background .25s, color .3s, box-shadow .25s }
.G :is(.chip, .g-addl, .g-back, .g-x, .g-here, .g-pchip[data-a], .tl-x, .g-mic, .pp, .bell, .g-link, .g-tlink, .g-sec button, .g-from button, .g-tp, .toast button, .banner .bc, .v-btn):active { transform: scale(.97) }
.G :is(.g-row[data-a], .g-opt, .g-alt, .g-bk, .g-upd, .v-rowb, .v-sp, .v-people, .tl-swap, .tl-leg[data-a], .g-held[data-a], .g-sw, .v-must, .g-opts2 button, .banner .bx, .r-step[data-a]) { transition: transform .35s cubic-bezier(.2, .9, .25, 1), background .25s, box-shadow .2s }
.G :is(.g-row[data-a], .g-opt, .g-alt, .g-bk, .g-upd, .v-rowb, .v-sp, .v-people, .tl-swap, .tl-leg[data-a], .g-held[data-a], .g-sw, .v-must, .g-opts2 button, .banner .bx, .r-step[data-a]):active { transform: scale(.985) }
/* The mini player steps aside while its own stream sheet is open */
.G:has(.layers > .layer:last-child .g-video) .player { opacity: 0; transform: translateY(21px); pointer-events: none }
/* Proposal cards: the place line also keeps clear of the remove button */
.G .tl-c.px .tt + .mm { padding-right: 34px }
/* Page header: greeting or date on the left, Updates and You on the right. Location is the first chip under the headline. */
.G .g-tl2 { flex: 1; min-width: 0; font-size: 13px; line-height: 21px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.G .g-hero .g-here, .G .g-chips .g-here { max-width: 100%; opacity: 1 }
.G .g-chips .g-here span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.G .g-chips .g-here svg:last-child { opacity: .5 }
.G .g-top ~ .g-hero, .G .g-head.t { padding-top: 0 }
/* Today: tighter rhythm between sections */
.G .scroll.td .g-hero { padding-bottom: 13px }
.G .scroll.td .g-sec { padding-top: 21px }

/* ---------- Plan sheet: Start and Finish by are tappable fields ---------- */
.G .g-when { display: flex; align-items: center; gap: 5px }
.G .g-when > i { flex: none; display: grid; place-items: center; color: var(--g3) }
.G .g-tf { flex: 1; min-width: 0; text-align: left; padding: 8px 13px; border-radius: 13px; background: rgba(0, 0, 0, .04); transition: box-shadow .2s, background .2s }
.G .g-tf.on { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink) }
.G .g-tf small { display: block; font-size: 10px; line-height: 13px; color: var(--g2) }
.G .g-tf b { display: block; font-size: 21px; line-height: 27px; font-weight: 500; font-variant-numeric: tabular-nums }
.G .g-tf span { display: flex; align-items: center; gap: 3px; min-height: 21px; font-size: 13px; line-height: 21px; color: var(--g2); white-space: nowrap }
.G .g-tf span svg { flex: none; transition: transform .2s }
.G .g-tf.on span svg { transform: rotate(180deg) }
.G .g-sum2 .g-filt.in { padding-top: 13px }
.G .g-sum2 .g-around { display: flex; align-items: flex-start; gap: 8px; flex-wrap: nowrap; font-size: 13px; line-height: 21px }
.G .g-sum2 .g-around svg { flex: none; margin-top: 4px }
.G .g-sum2 { display: block; padding: 13px }
.G .g-sum2 .g-around { margin-top: 13px; padding: 0 8px }

/* ---------- Sheets: the grabber and header stay pinned while the content scrolls ---------- */
.G .sh-top { position: sticky; top: -8px; z-index: 3; margin: -8px -21px 0; padding: 8px 21px 13px; transition: background-color .2s, box-shadow .2s }
.G .sh.scrolled .sh-top { background: #FBFAF9; box-shadow: 0 1px 0 rgba(27, 27, 27, .06) }
.G .sh > .sh-top + * { margin-top: 0 }

/* ---------- Card corners are concentric ----------
   A card that holds a 55px photo has 13px padding, so its corner is the photo's corner + 13 (26 / 13).
   Both corners then share one centre and read as one shape. Round avatars stay circles. */
.G .g-row, .G .tl-c, .G .g-opt, .G .pv-new, .G .g-bk, .G .g-alt { border-radius: 26px }
.G .th, .G .tl-c img, .G .pv-new img, .G .g-bk img, .G .g-ven img, .G .g-alt-h img, .G .g-opt.rad .th { border-radius: 13px }
.G .swipe-act { border-radius: 26px }

/* Calendar edit mode, and a session the organisers moved */
.G .tl-c.ed { position: relative; padding-right: 42px }
.G .tl-c .tl-more { top: 13px; right: 8px; background: none; box-shadow: none; color: var(--g3) }
.G .tl-c .tl-more[aria-expanded="true"] { color: var(--ink); background: rgba(27, 27, 27, .06) }
.G .tl-row.mopen { position: relative; z-index: 3 }
.G .tl-menu { top: 52px; right: 4px; width: 200px; transform-origin: top right }
.G .tl-acts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 8px; margin-top: 3px; border-top: 1px solid rgba(27, 27, 27, .08) }
.G .tl-acts .g-btn { margin: 0; height: 40px; padding: 0 13px }