/* Shared navigation and result cards. Colors come from theme.css. */
.site-menu-toggle{display:none}
body[data-page] .header{height:80px;min-height:80px;margin-bottom:0;padding:0;position:relative;z-index:30;background:transparent;border-bottom:1px solid var(--hm-line)}
body[data-page] .header .header-inner{gap:28px}
body[data-page] .header .brand-logo{width:170px}
body[data-page] .header .nav{margin-left:auto;margin-right:0;gap:26px}
body[data-page] .header .header-actions{margin-left:auto;gap:18px}
body[data-page] .header .locale{font-size:12px}
body[data-page] .header .login-link{font-size:13px}
body[data-page] .header .btn{min-height:44px;padding:10px 23px}
body[data-page="home"] .header{margin-bottom:-80px;border-bottom:0}
body[data-page="home"] .header .header-inner{position:relative}
.site-menu-toggle:focus-visible,.binding-alternative summary:focus-visible{outline:3px solid var(--hm-pink,#f2b8d4);outline-offset:4px}
/* The compact menu uses the shared modal lifecycle, with its own light surface. */
body[data-page] #modal-root .site-menu-backdrop{background:#132b3cb8;backdrop-filter:blur(10px)}
body[data-page] #modal-root #site-menu-dialog{display:flex;flex-direction:column;max-width:420px;padding:26px 22px 20px;border:1px solid var(--hm-light-line);border-radius:var(--hm-card-radius);background:var(--hm-light);color:var(--hm-deep);overflow:hidden;box-shadow:0 24px 80px #081a2666}
body[data-page] #site-menu-dialog h2{flex:none;margin:0 48px 18px 2px;font:650 25px/1.45 var(--hm-display);letter-spacing:-.5px;color:var(--hm-deep)}
body[data-page] #site-menu-dialog .modal-close{display:grid;place-items:center;width:44px;height:44px;top:18px;right:16px;padding:10px;background:var(--hm-pink);color:var(--hm-deep);border:1px solid var(--hm-light-line);border-radius:14px}
.site-menu-content{min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:8px;padding:3px 3px 0;scrollbar-width:thin;scrollbar-color:var(--hm-mist) transparent}
.site-menu-nav{display:grid;gap:6px}
.site-menu-row{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 12px;background:transparent;color:var(--hm-deep);border:1px solid var(--hm-light-line);border-radius:var(--hm-control-radius);text-align:left;font-size:16px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.site-menu-icon{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:10px;background:#41637b12;color:var(--hm-pink-ink)}
.site-menu-row>.site-menu-arrow{margin-left:auto;width:18px;height:18px;flex:none;color:var(--hm-mist)}
.site-menu-account{margin-top:16px;padding-top:16px;border-top:1px solid var(--hm-light-line)}
body[data-page] #site-menu-dialog .site-menu-account-name{margin:8px 12px 0;color:var(--hm-ink-muted);font-size:14px;overflow-wrap:anywhere}
body[data-page] #site-menu-dialog .site-menu-join{display:flex;justify-content:space-between;width:100%;min-height:50px;padding:12px 16px;background:var(--hm-pink);color:var(--hm-deep);border:1px solid var(--hm-light-line);font-size:16px}
.site-menu-login{display:block;width:100%;min-height:44px;margin-top:4px;padding:8px 12px;background:transparent;color:var(--hm-pink-ink);font-size:14px;line-height:1.6}
.site-menu-language{display:flex;align-items:center;gap:12px;margin-top:12px;padding:16px 0;border-top:1px solid var(--hm-light-line)}
.site-menu-language label{display:flex;align-items:center;gap:8px;flex:none;white-space:nowrap;font-size:14px;color:var(--hm-deep)}
.site-menu-language .icon{width:18px;height:18px;flex:none}
body[data-page] #site-menu-locale{flex:1;min-width:0;width:152px;max-width:60%;min-height:46px;margin-left:auto;padding:8px 10px;font:16px/1.5 var(--sans);color:var(--hm-deep);background:var(--hm-light);border:1px solid var(--hm-light-line);border-radius:12px}
.site-menu-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;border-top:1px solid var(--hm-light-line);padding-top:8px}
.site-menu-links button{min-width:0;min-height:44px;padding:8px 2px;background:transparent;border-radius:10px;color:var(--hm-ink-muted);font-size:13px;line-height:1.5;overflow-wrap:anywhere}
body[data-page] #site-menu-dialog :is(button,select):focus-visible{outline:2px solid var(--hm-pink-ink);outline-offset:1px}
@media(hover:hover){.site-menu-row:hover,.site-menu-links button:hover,.site-menu-login:hover{background:#41637b12}.site-menu-login:hover{border-radius:12px}}
.binding-alternative{margin-top:22px;border-top:1px solid var(--journey-line);padding-top:16px}
.binding-alternative summary{cursor:pointer;color:var(--journey-muted);font-size:13px;line-height:1.7;padding:6px 0}
.binding-alternative[open] summary{color:var(--journey-text)}
.binding-alternative .binding-code{font-size:17px;overflow-wrap:anywhere;letter-spacing:.07em}
.binding-alternative .binding-label{font-size:12px}

/* Resolve the old page-scoped button themes with one common palette. */
body[data-page] .btn:not(.secondary):not(.dark){background:var(--journey-primary-bg);color:var(--journey-primary-text);border-color:transparent;border-radius:var(--hm-control-radius)}
body[data-page] .btn.secondary{background:transparent;color:var(--hm-text);border-color:var(--hm-line);border-radius:var(--hm-control-radius)}
body[data-page] .btn:not(.secondary):not(.dark):hover{background:var(--hm-pink);color:var(--hm-deep)}
body[data-page] :is(.input,.choice,.suggest-chip,.upload-box){border-color:var(--hm-line)}
body[data-page] :is(.input:focus,.input:focus-visible){border-color:var(--hm-pink);box-shadow:0 0 0 3px #f2bfd724}
body[data-page] .working-status{background:var(--hm-deep);color:var(--hm-text);border-color:var(--hm-line)}
body[data-page] #toast{background:var(--hm-pink);color:var(--hm-deep)}
body[data-page] .preview-bar{background:var(--hm-deep);color:var(--hm-muted)}
body[data-page] .account-status-confirmed,body[data-page] .account-connection-state.is-connected{color:var(--hm-pink)}
body[data-page] .account-connection-state.is-connected i{background:var(--hm-pink)}
body[data-page] .account-avatar>span{background:var(--hm-mist)}
body[data-page="profile"] .account-page .account-current{margin:24px 0 32px;padding:28px 32px;border:1px solid var(--hm-light-line);background:var(--hm-light);color:var(--hm-deep);box-shadow:0 10px 36px #081c2512}
body[data-page="profile"] .account-page .account-current .account-section-heading{margin-bottom:18px}
body[data-page="profile"] .account-page .account-current .account-section-heading h2{color:var(--hm-deep);font-size:20px}
body[data-page="profile"] .account-page .account-current .account-section-icon{background:var(--hm-pink);color:var(--hm-pink-ink)}
body[data-page="profile"] .account-page .account-current .account-progress-copy{color:var(--hm-ink-muted);font-size:16px;line-height:1.8;margin-top:20px}
body[data-page="profile"] .account-page .account-current .account-journey{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0;margin:0;list-style:none}
body[data-page="profile"] .account-page .account-current .account-journey li{display:block;border:0;border-top:2px solid var(--hm-light-line);border-radius:0;background:transparent;padding:12px 0 0;color:var(--hm-ink-muted);font-size:13px}
body[data-page="profile"] .account-page .account-current .account-journey li::before{display:none}
body[data-page="profile"] .account-page .account-current .account-journey li[data-state="done"]{border-color:var(--hm-pink-ink);color:var(--hm-pink-ink)}
body[data-page="profile"] .account-page .account-current .account-journey li[data-state="current"]{border-color:var(--hm-pink-ink);color:var(--hm-pink-ink);font-weight:650}
body[data-page="profile"] .account-page .account-current .account-inline-link{color:var(--hm-pink-ink);min-height:44px;margin-top:12px}
body[data-page="profile"] .account-page .account-current .btn{margin-top:12px;background:var(--hm-deep);color:#fff;border-color:var(--hm-deep)}
body[data-page="date"] .meetup-ticket{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;margin:24px 0;border:1px solid var(--hm-light-line);border-radius:28px;background:var(--hm-light);color:var(--hm-deep);box-shadow:0 24px 70px #081a2630}
body[data-page="date"] .meetup-ticket .plan-section{margin:0;border:0;border-radius:0;box-shadow:none;background:transparent;color:inherit;padding:28px 32px}
body[data-page="date"] .meetup-ticket .meetup-ticket-time{grid-column:1/-1;padding:32px;background:var(--hm-pink);border-bottom:1px dashed var(--hm-light-line)}
body[data-page="date"] .meetup-ticket .meetup-ticket-time .plan-line>strong{font-size:clamp(21px,2.3vw,29px);line-height:1.5;font-weight:550;letter-spacing:-.6px}
body[data-page="date"] .meetup-ticket .plan-section h3{color:var(--hm-pink-ink);opacity:1;font-size:12px;font-weight:650;letter-spacing:.06em;margin-bottom:15px}
body[data-page="date"] .meetup-ticket .plan-line{color:var(--hm-deep);line-height:1.8}
body[data-page="date"] .meetup-ticket .plan-line strong{font-size:20px}
body[data-page="date"] .meetup-ticket .plan-badge{background:var(--hm-light);color:var(--hm-pink-ink);border:1px solid var(--hm-light-line)}
body[data-page="date"] .meetup-ticket :is(.hint,.plan-address,small){color:var(--hm-ink-muted)}
body[data-page="date"] .meetup-ticket .text-btn{color:var(--hm-pink-ink)}
body[data-page="date"] .meetup-ticket .btn.secondary{background:var(--hm-light);color:var(--hm-ink-muted);border:1px solid var(--hm-light-line)}
body[data-page="date"] .meetup-ticket .btn:not(.secondary){background:var(--hm-deep);color:#fff;border-color:var(--hm-deep)}
body[data-page="date"] .meetup-ticket .meetup-ticket-person{border-right:1px solid var(--hm-light-line)}
body[data-page="date"] .meetup-ticket .meeting-contact-pending{grid-column:1/-1;background:var(--hm-light);border-bottom:1px solid var(--hm-light-line)}
body[data-page="date"] .meetup-ticket>.plan-section:last-child:not(.meetup-ticket-venue){grid-column:1/-1;border-top:1px solid var(--hm-light-line)}
body[data-page="date"] .meetup-ticket .venue-reservation-note{font-size:12px;color:var(--hm-ink-muted);margin-top:18px;line-height:1.7}
body[data-page="date"] .meetup-ticket[data-meetup-state="CANCELLED"],body[data-page="date"] .meetup-ticket[data-meetup-state="EXPIRED"]{box-shadow:none}
/* Introductions and meeting results share a pale blue surface. */
body[data-page="match"] .profile-poster{background:var(--hm-light);color:var(--hm-deep);border:1px solid var(--hm-light-line);border-radius:26px;box-shadow:0 20px 55px #081a2626}
body[data-page="match"] .poster-copy{background:var(--hm-light);color:var(--hm-deep);border-radius:0;padding:36px}
body[data-page="match"] .profile-poster .poster-copy .eyebrow{color:var(--hm-pink-ink);font-size:11px;letter-spacing:.12em}
body[data-page="match"] .poster-copy h2{color:var(--hm-deep);margin-top:12px}
body[data-page="match"] .poster-copy p{color:var(--hm-ink-muted);line-height:1.8}
body[data-page="match"] .poster-copy .tags span{color:var(--hm-pink-ink);background:var(--hm-pink);border:1px solid var(--hm-light-line);font-size:12px}
body[data-page="match"] .poster-copy blockquote{color:var(--hm-ink-muted)}
body[data-page="match"] .poster-image img{transform:none;object-fit:cover;object-position:center}
body[data-page="match"] .profile-poster--no-photo{grid-template-columns:1fr}
body[data-page="match"] .profile-poster--no-photo .poster-copy{order:1}
body[data-page="match"] .profile-poster--no-photo .poster-image{order:2;height:auto;min-height:0}
body[data-page="match"] .profile-poster--no-photo .photo-unavailable{min-height:64px;padding:18px 24px;background:var(--hm-light);color:var(--hm-ink-muted);font-size:12px;border-top:1px dashed var(--hm-light-line)}
body[data-page="match"] .introduction-reasons{background:var(--hm-light);border-color:var(--hm-light-line);color:var(--hm-deep);padding:28px 32px}
body[data-page="match"] .introduction-reasons h3{font-size:17px;color:var(--hm-pink-ink)}
body[data-page="match"] .introduction-reasons .reason p{font-size:14px;color:var(--hm-ink-muted)}
body[data-page="match"] .introduction-reasons .reason .icon{color:var(--hm-pink-ink);flex-shrink:0}
body[data-page="match"] .introduction-details{margin-top:24px}
body[data-page="match"] .introduction-details dt{color:var(--hm-muted);opacity:1}
@media(max-width:760px), (max-width:960px) and (pointer:coarse){
  body[data-page] .header{min-height:72px;height:auto;padding:10px 0;position:relative}
  body[data-page] .header .header-inner{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:0 10px;align-items:center}
  body[data-page="home"] .header{margin-bottom:-72px}
  body[data-page] .header .brand{grid-column:1;grid-row:1}
  body[data-page] .header .brand-logo{width:128px}
  body[data-page] .header .header-actions{display:contents}
  body[data-page] .header .site-menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;grid-column:3;grid-row:1;min-width:86px;height:46px;padding:10px 12px;border:1px solid var(--hm-pink);border-radius:var(--hm-control-radius);background:var(--hm-pink);color:var(--hm-deep);box-shadow:0 4px 18px #132b3c3d;font-size:14px;font-weight:650;line-height:1.5;white-space:nowrap;cursor:pointer}
  body[data-page] .header .site-menu-toggle:hover{background:var(--hm-light);border-color:var(--hm-light)}
  .site-menu-toggle .icon{width:22px;height:22px;stroke-width:2;flex:none}
  body[data-page] .header .account-nav{grid-column:2;grid-row:1;max-width:125px;font-size:12px}
  body[data-page] .header .account-nav-name{max-width:80px;font-size:12px}
  body[data-page] .header .header-account-loading{grid-column:2;grid-row:1;font-size:11px;max-width:100px}
  body[data-page] .header :is(.nav,.locale,.login-link,.header-home){display:none}
  body:not([data-page="home"]) .header .header-home{display:inline-flex;grid-column:2;grid-row:1;padding:6px 2px;font-size:12px;min-height:44px}
  body[data-page] .header .header-actions>:is(.btn,.account-nav,.header-account-loading){display:none}
  body[data-page="profile"] .account-page .account-current{padding:24px 20px;margin:20px 0 28px}
  body[data-page="profile"] .account-page .account-current .account-journey{gap:8px}
  body[data-page="profile"] .account-page .account-current .account-journey li{font-size:12px;padding-top:10px;line-height:1.7}
  body[data-page="profile"] .account-page .account-current .account-progress-copy{font-size:15px}
  body[data-page="match"] .poster-copy{padding:26px 24px}
  body[data-page="match"] .introduction-reasons{padding:24px}
  body[data-page="date"] .meetup-ticket{grid-template-columns:1fr;border-radius:22px}
  body[data-page="date"] .meetup-ticket .plan-section,body[data-page="date"] .meetup-ticket .meetup-ticket-time{padding:24px 20px}
  body[data-page="date"] .meetup-ticket .meetup-ticket-person{border-right:0;border-bottom:1px solid var(--hm-light-line)}
  body[data-page="date"] .meetup-ticket .plan-actions{gap:8px;flex-wrap:wrap}
  body[data-page="date"] .meetup-ticket .plan-actions .btn{min-height:44px}

  #app{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  body[data-page] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),textarea,select){font-size:16px}
  body[data-page] .text-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;white-space:normal;line-height:1.6}
  body[data-page] .checkbox-label{min-height:44px;align-items:flex-start}
  body[data-page] .checkbox-label .inline-link{display:inline-flex;align-items:center;min-height:44px;min-width:44px;vertical-align:middle;padding:4px 2px}
  body[data-page] .footer{padding-bottom:max(28px,env(safe-area-inset-bottom,0px))}
  body[data-page] .footer-links{flex-wrap:wrap;gap:8px 22px}
  .binding-alternative summary{display:flex;align-items:center;min-height:48px;font-size:14px;padding:10px 0}
  .binding-alternative .binding-label{font-size:14px;line-height:1.7}
  .modal-backdrop{top:var(--hm-modal-top,0px);bottom:auto;height:var(--hm-modal-height,100dvh);padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));overflow:hidden}
  body[data-page] #modal-root .modal{max-height:100%;min-width:0;padding:24px 20px;overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:16px;overflow-wrap:anywhere}
  body[data-page] #modal-root .modal h2{margin-right:36px;font-size:24px;line-height:1.45}
  body[data-page] #modal-root .modal p{font-size:14px;line-height:1.8}
  body[data-page] #modal-root .modal-close{display:grid;place-items:center;min-width:44px;min-height:44px;top:10px;right:10px}
  body[data-page] #modal-root .modal-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  body[data-page] #modal-root .modal-actions :is(.btn,.text-btn){min-height:48px;width:100%;margin:0;white-space:normal;overflow-wrap:anywhere;line-height:1.6}
  body[data-page="match"] .poster-copy :is(h2,p,blockquote),body[data-page="date"] .meetup-ticket :is(.plan-line,.plan-address,.meeting-contact){overflow-wrap:anywhere;min-width:0}
  body[data-page="date"] .meetup-ticket :is(.plan-line,.plan-address,.meeting-contact){font-size:16px}
}
@media(max-width:359px){
  body[data-page] #modal-root #site-menu-dialog{padding:22px 18px 16px}
  body[data-page] #site-menu-dialog h2{margin-bottom:14px}
  .site-menu-account{margin-top:12px;padding-top:12px}
  .site-menu-language{padding:12px 0}
  body[data-page] .header .brand-logo{width:112px}
  body[data-page] .header .header-inner{column-gap:6px}
  body[data-page] .header .header-actions>.btn{padding:10px 12px}
  body[data-page] .header .account-nav-name{max-width:60px}

  body[data-page="profile"] .account-page .account-current .account-journey{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
  body[data-page="match"] .poster-copy,body[data-page="match"] .introduction-reasons{padding:24px 20px}
  body[data-page="date"] .meetup-ticket .plan-section,body[data-page="date"] .meetup-ticket .meetup-ticket-time{padding:22px 18px}
}
@media(prefers-reduced-motion:no-preference){
  body[data-page="date"] .meetup-ticket{animation:meetup-arrive .3s ease-out both}
  .site-menu-toggle{transition:background .18s,border-color .18s}
  .site-menu-dialog{animation:meetup-arrive .2s ease-out both}
  @keyframes meetup-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}